[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { cn } from "@/lib/utils" const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }) export const metadata = { title: "eSIM Myanmar", description: "Connecting Myanmar, One eSIM at a Time", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" "use client" import * as React from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes { label?: string error?: string } const Input = React.forwardRef(({ className, type, label, error, ...props }, ref) => { return (

{label && ( {label} )} {error &&

{error}

}

) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/modal.tsx" isMerged="true" "use client" import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import { X } from "lucide-react" import { cn } from "@/lib/utils" interface ModalProps { isOpen: boolean onClose: () => void children: React.ReactNode className?: string } export function Modal({ isOpen, onClose, children, className }: ModalProps) { // Close on escape key React.useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") onClose() } window.addEventListener("keydown", handleEscape) return () => window.removeEventListener("keydown", handleEscape) }, [onClose]) // Prevent body scroll when modal is open React.useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden" } else { document.body.style.overflow = "" } return () => { document.body.style.overflow = "" } }, [isOpen]) return ( {isOpen && ( <> e.stopPropagation()} >

{children}

)} ) } [V0_FILE]typescriptreact:file="components/ui/banner.tsx" isMerged="true" "use client" import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import { X } from "lucide-react" import { cn } from "@/lib/utils" interface BannerProps { children: React.ReactNode variant?: "default" | "success" | "warning" | "danger" className?: string onClose?: () => void isVisible?: boolean } export function Banner({ children, variant = "default", className, onClose, isVisible = true }: BannerProps) { const [visible, setVisible] = React.useState(isVisible) React.useEffect(() => { setVisible(isVisible) }, [isVisible]) const handleClose = () => { setVisible(false) if (onClose) onClose() } const variantStyles = { default: "bg-secondary text-secondary-foreground", success: "bg-success/20 text-success border-success/30", warning: "bg-warning/20 text-warning border-warning/30", danger: "bg-danger/20 text-danger border-danger/30", } return ( {visible && (

{children}

{onClose && ( )}

)} ) } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/language-switch.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface LanguageSwitchProps { onChange: (language: "en" | "my") => void currentLanguage: "en" | "my" className?: string } export function LanguageSwitch({ onChange, currentLanguage, className }: LanguageSwitchProps) { return (

) } [V0_FILE]typescriptreact:file="components/screens/order-confirmation-screen.tsx" isMerged="true" "use client" import { useEffect } from "react" import { motion } from "framer-motion" import confetti from "canvas-confetti" import { Check } from "lucide-react" import { Button } from "@/components/ui/button" interface OrderConfirmationScreenProps { onNavigate: (screen: string) => void } export default function OrderConfirmationScreen({ onNavigate }: OrderConfirmationScreenProps) { useEffect(() => { // Trigger confetti effect const duration = 3 * 1000 const animationEnd = Date.now() + duration const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 } function randomInRange(min: number, max: number) { return Math.random() * (max - min) + min } const interval: NodeJS.Timeout = setInterval(() => { const timeLeft = animationEnd - Date.now() if (timeLeft <= 0) { return clearInterval(interval) } const particleCount = 50 * (timeLeft / duration) // Since particles fall down, start a bit higher than random confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, }) confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, }) }, 250) return () => clearInterval(interval) }, []) return (

Successfully Activated! Your eSIM has been activated and is ready to use

) } [V0_FILE]typescriptreact:file="components/modals/qr-checkout-modal.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Copy, Share2 } from "lucide-react" import { Modal } from "@/components/ui/modal" import { Button } from "@/components/ui/button" interface QrCheckoutModalProps { onClose: () => void onSuccess: () => void } export default function QrCheckoutModal({ onClose, onSuccess }: QrCheckoutModalProps) { const [isLoading, setIsLoading] = useState(true) const [copied, setCopied] = useState(false) useEffect(() => { // Simulate loading const timer = setTimeout(() => { setIsLoading(false) }, 2000) return () => clearTimeout(timer) }, []) const handleCopy = () => { // Copy LPA code to clipboard navigator.clipboard.writeText("LPA:1$smdp.example.com$ABC123XYZ") setCopied(true) setTimeout(() => setCopied(false), 2000) } const handleActivate = () => { // Simulate activation setIsLoading(true) setTimeout(() => { setIsLoading(false) onSuccess() }, 2000) } return (

Activate eSIM

Scan this QR code with your device to activate your eSIM

{isLoading ? (

) : (

)}

LPA Code

LPA:1$smdp.example.com$ABC123XYZ

{copied &&

Copied to clipboard!

}

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface TabsProps { tabs: { id: string; label: string; icon?: React.ReactNode }[] activeTab: string onChange: (id: string) => void className?: string } export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) { return (

{tabs.map((tab) => { const isActive = activeTab === tab.id return ( ) })}

) } export const TabsList = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TabsList.displayName = "TabsList" export const TabsTrigger = React.forwardRef>( ({ className, ...props }, ref) => (

) } [V0_FILE]typescriptreact:file="components/ui/smart-notification.tsx" isMerged="true" "use client" import type * as React from "react" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Bell, X, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" interface SmartNotificationProps { title: string message: string type?: "info" | "success" | "warning" | "danger" icon?: React.ReactNode autoClose?: boolean duration?: number action?: { label: string onClick: () => void } onClose?: () => void className?: string } export function SmartNotification({ title, message, type = "info", icon, autoClose = true, duration = 5000, action, onClose, className, }: SmartNotificationProps) { const [isVisible, setIsVisible] = useState(true) useEffect(() => { let timer: NodeJS.Timeout if (autoClose) { timer = setTimeout(() => { handleClose() }, duration) } return () => { if (timer) clearTimeout(timer) } }, [autoClose, duration]) const handleClose = () => { setIsVisible(false) if (onClose) { setTimeout(() => { onClose() }, 300) // Wait for exit animation } } const typeStyles = { info: "bg-accent/10 border-accent/30", success: "bg-success/10 border-success/30", warning: "bg-warning/10 border-warning/30", danger: "bg-danger/10 border-danger/30", } const iconColor = { info: "text-accent", success: "text-success", warning: "text-warning", danger: "text-danger", } const defaultIcons = { info: , success: , warning: , danger: , } return ( {isVisible && (

{icon || defaultIcons[type]}

{title}

{message}

{action && ( )}

{autoClose && ( )} )} ) } [V0_FILE]typescriptreact:file="components/ui/theme-switcher.tsx" isMerged="true" "use client" import type * as React from "react" import { motion } from "framer-motion" import { Moon, Sun, Laptop } from "lucide-react" import { cn } from "@/lib/utils" type Theme = "light" | "dark" | "system" interface ThemeSwitcherProps { currentTheme: Theme onChange: (theme: Theme) => void className?: string } export function ThemeSwitcher({ currentTheme, onChange, className }: ThemeSwitcherProps) { const themes: { value: Theme; icon: React.ReactNode; label: string }[] = [ { value: "light", icon: , label: "Light" }, { value: "dark", icon: , label: "Dark" }, { value: "system", icon: , label: "System" }, ] return (

{themes.map((theme) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ui/pin-entry.tsx" isMerged="true" "use client" import type * as React from "react" import { useState, useRef, useEffect } from "react" import { motion } from "framer-motion" import { Fingerprint, Eye, EyeOff, AlertCircle } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface PinEntryProps { length?: number onComplete?: (pin: string) => void onBiometricRequest?: () => void error?: string showBiometricOption?: boolean className?: string } export function PinEntry({ length = 4, onComplete, onBiometricRequest, error, showBiometricOption = true, className, }: PinEntryProps) { const [pin, setPin] = useState(Array(length).fill("")) const [activeIndex, setActiveIndex] = useState(0) const [showPin, setShowPin] = useState(false) const [shake, setShake] = useState(false) const inputRefs = useRef<(HTMLInputElement | null)[]>([]) // Initialize refs array useEffect(() => { inputRefs.current = inputRefs.current.slice(0, length) }, [length]) // Focus the first input on mount useEffect(() => { if (inputRefs.current[0]) { inputRefs.current[0].focus() } }, []) // Handle pin completion useEffect(() => { const isComplete = pin.every((digit) => digit !== "") if (isComplete && onComplete) { onComplete(pin.join("")) } }, [pin, onComplete]) // Handle error animation useEffect(() => { if (error) { setShake(true) const timer = setTimeout(() => setShake(false), 500) return () => clearTimeout(timer) } }, [error]) const handleChange = (index: number, value: string) => { // Only allow digits if (!/^\d*$/.test(value)) return // Update the pin array const newPin = [...pin] newPin[index] = value.slice(-1) // Only take the last character if multiple are pasted setPin(newPin) // Move to next input if a digit was entered if (value && index < length - 1) { setActiveIndex(index + 1) inputRefs.current[index + 1]?.focus() } } const handleKeyDown = (index: number, e: React.KeyboardEvent) => { // Move to previous input on backspace if current input is empty if (e.key === "Backspace" && !pin[index] && index > 0) { setActiveIndex(index - 1) inputRefs.current[index - 1]?.focus() // Clear the previous input const newPin = [...pin] newPin[index - 1] = "" setPin(newPin) } // Handle arrow keys if (e.key === "ArrowLeft" && index > 0) { setActiveIndex(index - 1) inputRefs.current[index - 1]?.focus() } if (e.key === "ArrowRight" && index < length - 1) { setActiveIndex(index + 1) inputRefs.current[index + 1]?.focus() } } const handlePaste = (e: React.ClipboardEvent) => { e.preventDefault() const pastedData = e.clipboardData.getData("text/plain").trim() // Check if pasted content is all digits and not longer than pin length if (!/^\d+$/.test(pastedData)) return const digits = pastedData.split("").slice(0, length) const newPin = [...pin] digits.forEach((digit, index) => { newPin[index] = digit }) setPin(newPin) // Focus the next empty input or the last one const nextEmptyIndex = newPin.findIndex((digit) => digit === "") const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex setActiveIndex(focusIndex) inputRefs.current[focusIndex]?.focus() } const handleBiometricAuth = () => { if (onBiometricRequest) { onBiometricRequest() } } const togglePinVisibility = () => { setShowPin(!showPin) } return (

{Array.from({ length }).map((_, index) => (

(inputRefs.current[index] = el)} type={showPin ? "text" : "password"} inputMode="numeric" pattern="[0-9]*" maxLength={1} value={pin[index]} onChange={(e) => handleChange(index, e.target.value)} onKeyDown={(e) => handleKeyDown(index, e)} onPaste={index === 0 ? handlePaste : undefined} className={cn( "h-full w-full bg-transparent text-center text-2xl font-bold outline-none", !showPin && pin[index] && "text-[2rem]", )} style={{ caretColor: "transparent" }} /> {!showPin && pin[index] && (

)}

))}

{error && ( {error} )}

{showBiometricOption && ( )}

) } [V0_FILE]typescriptreact:file="components/ui/pin-pad.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { SkipBackIcon as Backspace, Fingerprint } from "lucide-react" import { cn } from "@/lib/utils" interface PinPadProps { length?: number onComplete?: (pin: string) => void onBiometricRequest?: () => void error?: string showBiometricOption?: boolean className?: string } export function PinPad({ length = 4, onComplete, onBiometricRequest, error, showBiometricOption = true, className, }: PinPadProps) { const [pin, setPin] = useState("") const [shake, setShake] = useState(false) // Handle error animation useEffect(() => { if (error) { setShake(true) const timer = setTimeout(() => setShake(false), 500) return () => clearTimeout(timer) } }, [error]) // Check if PIN is complete useEffect(() => { if (pin.length === length && onComplete) { onComplete(pin) } }, [pin, length, onComplete]) const handleDigitPress = (digit: number | string) => { if (pin.length < length) { setPin((prev) => prev + digit) } } const handleBackspace = () => { setPin((prev) => prev.slice(0, -1)) } const handleBiometricAuth = () => { if (onBiometricRequest) { onBiometricRequest() } } // Generate keypad digits const keypadDigits = [ [1, 2, 3], [4, 5, 6], [7, 8, 9], ["biometric", 0, "backspace"], ] return (

{/* PIN Indicators */} {Array.from({ length }).map((_, index) => ( ))} {/* Error Message */} {error && ( {error} )} {/* Keypad */}

{keypadDigits.flat().map((digit, index) => { if (digit === "biometric" && !showBiometricOption) { return

} return ( { if (digit === "backspace") { handleBackspace() } else if (digit === "biometric") { handleBiometricAuth() } else { handleDigitPress(digit) } }} > {digit === "backspace" ? ( ) : digit === "biometric" ? ( ) : ( digit )} ) })}

) } [V0_FILE]typescriptreact:file="components/screens/pin-verification-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowLeft, ShieldCheck } from "lucide-react" import { Button } from "@/components/ui/button" import { PinEntry } from "@/components/ui/pin-entry" import { PinPad } from "@/components/ui/pin-pad" import { FingerprintScanner } from "@/components/ui/fingerprint-scanner" interface PinVerificationScreenProps { onNavigate: (screen: string) => void onSuccess: () => void pinType?: "entry" | "pad" } export default function PinVerificationScreen({ onNavigate, onSuccess, pinType = "pad" }: PinVerificationScreenProps) { const [error, setError] = useState() const [showBiometric, setShowBiometric] = useState(false) const [isVerifying, setIsVerifying] = useState(false) const handlePinComplete = (pin: string) => { setIsVerifying(true) setError(undefined) // Simulate PIN verification setTimeout(() => { setIsVerifying(false) // For demo purposes, any PIN is valid except "1234" if (pin === "1234") { setError("Incorrect PIN. Please try again.") } else { onSuccess() } }, 1500) } const handleBiometricRequest = () => { setShowBiometric(true) } const handleBiometricSuccess = () => { onSuccess() } const handleBiometricError = () => { setShowBiometric(false) setError("Biometric authentication failed. Please use PIN.") } return (

{showBiometric ? ( ) : ( <>

Enter PIN

Please enter your PIN to continue

{pinType === "entry" ? (

) : (

)} {isVerifying && (

Verifying...

)}

Forgot PIN?{" "}

)}

) } [V0_FILE]typescriptreact:file="components/screens/create-pin-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowLeft, KeyRound, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { PinEntry } from "@/components/ui/pin-entry" import { PinPad } from "@/components/ui/pin-pad" interface CreatePinScreenProps { onNavigate: (screen: string) => void onSuccess: () => void pinType?: "entry" | "pad" } export default function CreatePinScreen({ onNavigate, onSuccess, pinType = "pad" }: CreatePinScreenProps) { const [step, setStep] = useState<"create" | "confirm">("create") const [pin, setPin] = useState("") const [error, setError] = useState() const [isCreating, setIsCreating] = useState(false) const handleCreatePin = (enteredPin: string) => { setPin(enteredPin) setStep("confirm") } const handleConfirmPin = (confirmedPin: string) => { if (confirmedPin !== pin) { setError("PINs don't match. Please try again.") return } setIsCreating(true) setError(undefined) // Simulate PIN creation setTimeout(() => { setIsCreating(false) onSuccess() }, 1500) } return (

{step === "create" ? : }

{step === "create" ? "Create PIN" : "Confirm PIN"}

{step === "create" ? "Create a secure 4-digit PIN for your account" : "Please re-enter your PIN to confirm"}

{pinType === "entry" ? (

) : (

)} {isCreating && (

Setting up your PIN...

)}

Your PIN is used to secure your account and authorize transactions

) } [V0_FILE]typescriptreact:file="components/screens/register-screen.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowLeft } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Checkbox } from "@/components/ui/checkbox" interface RegisterScreenProps { onNavigate: (screen: string) => void } export default function RegisterScreen({ onNavigate }: RegisterScreenProps) { const [name, setName] = useState("") const [phoneNumber, setPhoneNumber] = useState("") const [acceptTerms, setAcceptTerms] = useState(false) const [isLoading, setIsLoading] = useState(false) const handleRegister = () => { setIsLoading(true) // Simulate API call setTimeout(() => { setIsLoading(false) onNavigate("create-pin") }, 1500) } return (

Register

Create a new account to get started

setName(e.target.value)} /> setPhoneNumber(e.target.value)} />

setAcceptTerms(checked === true)} /> I accept the{" "} Terms of Service {" "} and{" "} Privacy Policy

Already have an account?{" "}

) } [V0_FILE]typescriptreact:file="components/ui/biometric-auth.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Fingerprint, Scan, CheckCircle2, XCircle } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type BiometricType = "fingerprint" | "face" | "auto" interface BiometricAuthProps { onSuccess: () => void onError?: () => void onCancel?: () => void type?: BiometricType autoTrigger?: boolean className?: string } export function BiometricAuth({ onSuccess, onError, onCancel, type = "auto", autoTrigger = false, className, }: BiometricAuthProps) { const [biometricType, setBiometricType] = useState<"fingerprint" | "face">( type === "auto" ? (Math.random() > 0.5 ? "fingerprint" : "face") : type, ) const [status, setStatus] = useState<"idle" | "scanning" | "success" | "error">("idle") const [errorMessage, setErrorMessage] = useState("") useEffect(() => { if (autoTrigger) { startAuthentication() } }, [autoTrigger]) const startAuthentication = () => { setStatus("scanning") setErrorMessage("") // Simulate biometric authentication process const authTimer = setTimeout(() => { const isSuccessful = Math.random() > 0.2 // 80% success rate for demo if (isSuccessful) { setStatus("success") setTimeout(() => { if (onSuccess) onSuccess() }, 1000) } else { setStatus("error") setErrorMessage( biometricType === "fingerprint" ? "Fingerprint not recognized. Please try again." : "Face not recognized. Please try again.", ) if (onError) { setTimeout(() => { onError() }, 2000) } } }, 2000) return () => clearTimeout(authTimer) } const handleCancel = () => { setStatus("idle") if (onCancel) onCancel() } return (

{/* Scanning animation rings */} {status === "scanning" && ( <> )} {/* Success animation */} {status === "success" ? ( ) : status === "error" ? ( ) : ( {biometricType === "fingerprint" ? ( ) : ( )} )}

{status === "idle" && (

{biometricType === "fingerprint" ? "Fingerprint Authentication" : "Face ID Authentication"}

{biometricType === "fingerprint" ? "Place your finger on the sensor to authenticate" : "Look at the camera to authenticate"}

)} {status === "scanning" && (

{biometricType === "fingerprint" ? "Scanning Fingerprint..." : "Scanning Face..."}

{biometricType === "fingerprint" ? "Keep your finger on the sensor" : "Please keep looking at the camera"}

)} {status === "success" && (

Authentication Successful

You have been verified

)} {status === "error" && (

Authentication Failed

{errorMessage}

)}

{status === "idle" && ( )} {status === "scanning" && ( )} {status === "error" && ( <> )}

) } [V0_FILE]typescriptreact:file="components/ui/face-id-scanner.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Scan, CheckCircle2, XCircle } from "lucide-react" import { cn } from "@/lib/utils" interface FaceIDScannerProps { onSuccess: () => void onError?: () => void autoStart?: boolean className?: string } export function FaceIDScanner({ onSuccess, onError, autoStart = true, className }: FaceIDScannerProps) { const [scanning, setScanning] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState(false) const [faceDetected, setFaceDetected] = useState(false) useEffect(() => { if (autoStart) { startScan() } }, [autoStart]) const startScan = () => { if (scanning || success) return setScanning(true) setError(false) setFaceDetected(false) // Simulate face detection after a delay setTimeout(() => { setFaceDetected(true) // Simulate scanning process setTimeout(() => { const isSuccessful = Math.random() > 0.2 // 80% success rate for demo if (isSuccessful) { setSuccess(true) setScanning(false) setTimeout(() => { onSuccess() }, 1000) } else { setError(true) setScanning(false) if (onError) { setTimeout(() => { onError() }, 1000) } } }, 1500) }, 1000) } return ( {/* Face scan animation */} {scanning && ( <> {/* Scanning animation rings */} )} {/* Face outline */} {/* Status icons */} {success ? ( ) : error ? ( ) : ( )} {scanning ? ( faceDetected ? ( Verifying identity... ) : ( Position your face in the frame ) ) : success ? ( Face ID verified ) : error ? ( Face not recognized ) : ( Look at the camera to authenticate )} ) } [V0_FILE]typescriptreact:file="components/ui/fingerprint-scanner.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Fingerprint, CheckCircle2, XCircle } from "lucide-react" import { cn } from "@/lib/utils" interface FingerprintScannerProps { onSuccess: () => void onError?: () => void autoStart?: boolean className?: string } export function FingerprintScanner({ onSuccess, onError, autoStart = false, className }: FingerprintScannerProps) { const [scanning, setScanning] = useState(false) const [success, setSuccess] = useState(false) const [error, setError] = useState(false) const [progress, setProgress] = useState(0) useEffect(() => { if (autoStart) { handleScan() } }, [autoStart]) const handleScan = () => { if (scanning || success) return setScanning(true) setError(false) setProgress(0) // Simulate scanning progress const interval = setInterval(() => { setProgress((prev) => { const newProgress = prev + 5 return newProgress }) }, 100) // Simulate scanning process setTimeout(() => { clearInterval(interval) const isSuccessful = Math.random() > 0.2 // 80% success rate for demo if (isSuccessful) { setSuccess(true) setScanning(false) setProgress(100) setTimeout(() => { onSuccess() }, 1000) } else { setError(true) setScanning(false) setProgress(0) if (onError) { setTimeout(() => { onError() }, 1000) } } }, 2000) return () => clearInterval(interval) } return ( {/* Scanning progress ring */} {scanning && ( )} {/* Scanning animation rings */} {scanning && ( <> )} {/* Status icons */} {success ? ( ) : error ? ( ) : ( )} {scanning ? ( Scanning... ) : success ? ( Fingerprint verified ) : error ? ( Fingerprint not recognized ) : ( Tap to authenticate )} ) } [V0_FILE]typescriptreact:file="components/screens/biometric-auth-screen.tsx" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowLeft, Fingerprint, Scan } from "lucide-react" import { Button } from "@/components/ui/button" import { BiometricAuth } from "@/components/ui/biometric-auth" import { FaceIDScanner } from "@/components/ui/face-id-scanner" import { FingerprintScanner } from "@/components/ui/fingerprint-scanner" interface BiometricAuthScreenProps { onNavigate: (screen: string) => void onSuccess: () => void biometricType?: "fingerprint" | "face" | "auto" } export default function BiometricAuthScreen({ onNavigate, onSuccess, biometricType = "auto", }: BiometricAuthScreenProps) { const [selectedType, setSelectedType] = useState<"fingerprint" | "face" | "combined">( biometricType === "auto" ? "combined" : biometricType, ) const handleBiometricSuccess = () => { setTimeout(() => { onSuccess() }, 500) } const handleBiometricError = () => { // Do nothing, let the user try again or switch methods } return (

Biometric Authentication

Verify your identity to continue

{selectedType !== "combined" && (

)} {selectedType === "fingerprint" ? ( ) : selectedType === "face" ? ( ) : ( onNavigate("pin-verification")} autoTrigger={true} /> )}

Can't use biometrics?{" "}

) } [V0_FILE]typescriptreact:file="components/screens/login-screen.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { ArrowLeft, Fingerprint, Scan } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { PinEntry } from "@/components/ui/pin-entry" interface LoginScreenProps { onNavigate: (screen: string) => void } export default function LoginScreen({ onNavigate }: LoginScreenProps) { const [phoneNumber, setPhoneNumber] = useState("") const [pin, setPin] = useState("") const [showPin, setShowPin] = useState(false) const [isLoading, setIsLoading] = useState(false) const [pinError, setPinError] = useState() const [phoneError, setPhoneError] = useState() const [step, setStep] = useState<"phone" | "pin">("phone") const handlePhoneSubmit = () => { // Validate phone number if (!phoneNumber) { setPhoneError("Phone number is required") return } if (!/^09\d{9}$/.test(phoneNumber)) { setPhoneError("Please enter a valid Myanmar phone number") return } setPhoneError(undefined) setStep("pin") } const handlePinComplete = (enteredPin: string) => { setPin(enteredPin) handleLogin() } const handleLogin = () => { setIsLoading(true) setPinError(undefined) // Simulate API call setTimeout(() => { setIsLoading(false) // For demo purposes, any PIN is valid except "1234" if (pin === "1234") { setPinError("Incorrect PIN. Please try again.") } else { onNavigate("home") } }, 1500) } const handleBiometricAuth = () => { onNavigate("biometric-auth") } return (

{step === "phone" ? "Login" : "Enter PIN"}

{step === "phone" ? "Enter your phone number to continue" : "Please enter your PIN to verify your identity"}

{step === "phone" ? ( <> { setPhoneNumber(e.target.value) if (phoneError) setPhoneError(undefined) }} error={phoneError} />

) : ( <>

Enter PIN for {phoneNumber}

{isLoading && (

Verifying...

)}

Don't have an account?{" "}

) } [V0_FILE]typescriptreact:file="components/ui/app-shell.tsx" isMerged="true" "use client" import { type ReactNode, useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Home, CreditCard, User, Bell, MessageSquare, Mic, Camera, Menu, X, Settings, HelpCircle, LogOut, ChevronRight, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { NetworkSignalIndicator } from "@/components/ui/network-signal-indicator" interface AppShellProps { children: ReactNode activeTab: string onTabChange: (tab: string) => void onShowChatAssistant: () => void onShowVoiceAssistant: () => void onShowImageScanner: () => void userName?: string userPhone?: string className?: string } export function AppShell({ children, activeTab, onTabChange, onShowChatAssistant, onShowVoiceAssistant, onShowImageScanner, userName = "User", userPhone = "+95 9123456789", className, }: AppShellProps) { const [showSidebar, setShowSidebar] = useState(false) const [notifications, setNotifications] = useState(2) const tabs = [ { id: "home", label: "Home", icon: }, { id: "myesim", label: "My eSIM", icon: }, { id: "profile", label: "Profile", icon: }, ] const sidebarItems = [ { id: "settings", label: "Settings", icon: }, { id: "help", label: "Help & Support", icon: }, ] return (

{/* Header */}

eSIM Myanmar

Welcome, {userName}

{/* Sidebar (Mobile) */} {showSidebar && ( <> setShowSidebar(false)} />

{userName.charAt(0)}

{userName}

{userPhone}

{tabs.map((tab) => ( ))}

Settings

{sidebarItems.map((item) => ( ))}

)} {/* Main Content */}

{children}

{/* Bottom Navigation */}

) } [V0_FILE]typescriptreact:file="components/screens/profile-screen.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { LogOut, HelpCircle, ChevronRight, User, Bell, Shield, CreditCard, Languages, Moon, Sun, Smartphone, } from "lucide-react" import { AppShell } from "@/components/ui/app-shell" import { Button } from "@/components/ui/button" import { LanguageSwitch } from "@/components/ui/language-switch" import { ThemeSwitcher } from "@/components/ui/theme-switcher" interface ProfileScreenProps { activeTab: string onTabChange: (tab: string) => void } export default function ProfileScreen({ activeTab, onTabChange }: ProfileScreenProps) { const [language, setLanguage] = useState<"en" | "my">("en") const [theme, setTheme] = useState<"light" | "dark" | "system">("dark") const menuItems = [ { id: "account", label: "Account Settings", icon: , description: "Manage your personal information", }, { id: "payment", label: "Payment Methods", icon: , description: "Add or remove payment options", }, { id: "notifications", label: "Notifications", icon: , description: "Configure notification preferences", }, { id: "security", label: "Security & Privacy", icon: , description: "Manage security settings", }, { id: "devices", label: "Connected Devices", icon: , description: "Manage your connected devices", }, { id: "help", label: "Help & Support", icon: , description: "Get help with your account", }, ] return ( {}} onShowVoiceAssistant={() => {}} onShowImageScanner={() => {}} >

Profile

Manage your account settings

User Name

+95 9123456789

Member since April 2025

APPEARANCE

Theme

Choose your preferred theme

Language

Select your preferred language

SETTINGS

{menuItems.map((item) => (

{item.icon}

{item.label}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/ui/mobile-header.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Bell, Menu, X, Search, ChevronLeft } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { NetworkSignalIndicator } from "@/components/ui/network-signal-indicator" import { useScrollPosition } from "@/hooks/use-scroll-position" interface MobileHeaderProps { title: string subtitle?: string showBack?: boolean onBack?: () => void showMenu?: boolean onMenuOpen?: () => void showSearch?: boolean showNotifications?: boolean notificationCount?: number onNotificationsOpen?: () => void onSearchOpen?: () => void className?: string transparent?: boolean userName?: string userAvatar?: string } export function MobileHeader({ title, subtitle, showBack = false, onBack, showMenu = false, onMenuOpen, showSearch = false, showNotifications = false, notificationCount = 0, onNotificationsOpen, onSearchOpen, className, transparent = false, userName, userAvatar, }: MobileHeaderProps) { const [isSearchOpen, setIsSearchOpen] = useState(false) const [searchQuery, setSearchQuery] = useState("") const scrollY = useScrollPosition() // Calculate header opacity based on scroll position const headerOpacity = scrollY.get() > 10 || !transparent ? 1 : 0 const [isCompact, setIsCompact] = useState(false) useEffect(() => { setIsCompact(scrollY.get() > 50) }, [scrollY]) return ( <> 0 ? "blur(10px)" : "none", }} >

{showBack ? ( ) : showMenu ? ( ) : userAvatar ? (

{userAvatar ? (

) : (

{userName?.charAt(0) || "U"}

)}

) : null} {title} {subtitle && (

{subtitle}

)}

{showSearch && ( )} {showNotifications && ( )}

{/* Search overlay */} {isSearchOpen && (

setSearchQuery(e.target.value)} className="pl-9" autoFocus />

)} ) } [V0_FILE]typescriptreact:file="components/ui/swipeable-card.tsx" isMerged="true" "use client" import { useState, useRef, type ReactNode } from "react" import { motion, type PanInfo, useMotionValue, useTransform } from "framer-motion" import { Trash2, Share2 } from "lucide-react" import { cn } from "@/lib/utils" interface SwipeableCardProps { children: ReactNode onDelete?: () => void onDownload?: () => void onShare?: () => void className?: string } export function SwipeableCard({ children, onDelete, onDownload, onShare, className }: SwipeableCardProps) { const [isDeleting, setIsDeleting] = useState(false) const cardRef = useRef(null) // Motion values for swipe animation const x = useMotionValue(0) const controls = useTransform(x, [-150, 0, 150], [-1, 0, 1]) // Background colors based on swipe direction const background = useTransform( controls, [-1, 0, 1], ["hsl(var(--danger))", "rgba(0, 0, 0, 0)", "hsl(var(--accent))"], ) // Icon opacity based on swipe direction const leftIconOpacity = useTransform(controls, [-1, -0.5, 0], [1, 0.5, 0]) const rightIconOpacity = useTransform(controls, [0, 0.5, 1], [0, 0.5, 1]) // Scale based on swipe direction const scale = useTransform(controls, [-1, 0, 1], [0.95, 1, 0.95]) // Handle drag end const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { const threshold = 100 if (info.offset.x < -threshold && onDelete) { setIsDeleting(true) setTimeout(() => { onDelete() setIsDeleting(false) x.set(0) }, 300) } else if (info.offset.x > threshold && onShare) { onShare() x.set(0) } else { x.set(0) } } return (

{/* Background elements that appear when swiping */} {/* Swipeable card content */} {children}

) } [V0_FILE]typescriptreact:file="hooks/use-scroll-position.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useMotionValue } from "framer-motion" export function useScrollPosition() { const scrollY = useMotionValue(0) useEffect(() => { const updateScrollPosition = () => { scrollY.set(window.scrollY) } // Set initial value updateScrollPosition() // Add scroll event listener window.addEventListener("scroll", updateScrollPosition, { passive: true }) return () => window.removeEventListener("scroll", updateScrollPosition) }, [scrollY]) return scrollY } [V0_FILE]typescriptreact:file="components/screens/my-esim-screen.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Plus, Filter, Search, ArrowUpDown, Download, Wifi, Calendar, Clock } from "lucide-react" import { Button } from "@/components/ui/button" import { EsimCard } from "@/components/ui/esim-card" import { ThreeDSimCard } from "@/components/ui/3d-sim-card" import { Input } from "@/components/ui/input" import { DynamicBackground } from "@/components/ui/dynamic-background" import { MobileHeader } from "@/components/ui/mobile-header" import { MobileNav } from "@/components/ui/mobile-nav" interface MyEsimScreenProps { activeTab: string onTabChange: (tab: string) => void onShowQrModal: () => void } export default function MyEsimScreen({ activeTab, onTabChange, onShowQrModal }: MyEsimScreenProps) { const [viewMode, setViewMode] = useState<"cards" | "list">("cards") const [searchTerm, setSearchTerm] = useState("") const [backgroundMode, setBackgroundMode] = useState<"default" | "success" | "warning" | "danger">("default") const esims = [ { id: "esim-1", title: "Standard Data Plan", status: "active" as const, dataAmount: "3 GB", dataUsed: "2.5 GB", validUntil: "15 May 2025", network: "4G/LTE", planType: "Data Only", purchaseDate: "15 Apr 2025", price: "10,000 MMK", }, { id: "esim-2", title: "Basic Data Plan", status: "expired" as const, dataAmount: "1 GB", dataUsed: "1 GB", validUntil: "1 Apr 2025", network: "4G/LTE", planType: "Data Only", purchaseDate: "25 Mar 2025", price: "5,000 MMK", }, { id: "esim-3", title: "Premium Data Plan", status: "pending" as const, dataAmount: "10 GB", validUntil: "30 days after activation", network: "4G/LTE", planType: "Data Only", purchaseDate: "2 May 2025", price: "20,000 MMK", }, ] const filteredEsims = esims.filter( (esim) => esim.title.toLowerCase().includes(searchTerm.toLowerCase()) || esim.status.toLowerCase().includes(searchTerm.toLowerCase()), ) return (

setSearchTerm(e.target.value)} className="pl-9" />

{filteredEsims.length > 0 ? ( <> {/* Featured eSIM */} {filteredEsims.some((esim) => esim.status === "active") && (

Active eSIM

esim.status === "active")?.title || ""} dataAmount={filteredEsims.find((esim) => esim.status === "active")?.dataAmount || ""} validUntil={filteredEsims.find((esim) => esim.status === "active")?.validUntil || ""} onClick={onShowQrModal} /> {/* Quick stats for active eSIM */}

Data

2.5 GB / 3 GB

Expires

15 May 2025

Days Left

12 days

)}

All eSIMs

{viewMode === "cards" ? (

{filteredEsims.map((esim, index) => ( onShowQrModal()} onShare={() => {}} onDelete={() => {}} onClick={() => onShowQrModal()} /> ))}

) : (

{filteredEsims.map((esim, index) => (

{esim.title}

{esim.dataAmount} • {esim.validUntil}

))}

)}

) : (

No eSIMs Found

{searchTerm ? `No results found for "${searchTerm}"` : "You don't have any active eSIMs yet"}

)}

) } [V0_FILE]typescriptreact:file="components/ui/mobile-nav.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence, useSpring, useTransform } from "framer-motion" import { Home, CreditCard, User, MessageSquare, Mic, Camera, X, Plus } from "lucide-react" import { cn } from "@/lib/utils" import { useScrollPosition } from "@/hooks/use-scroll-position" interface MobileNavProps { activeTab: string onTabChange: (tab: string) => void onShowChatAssistant?: () => void onShowVoiceAssistant?: () => void onShowImageScanner?: () => void onAddEsim?: () => void className?: string } export function MobileNav({ activeTab, onTabChange, onShowChatAssistant, onShowVoiceAssistant, onShowImageScanner, onAddEsim, className, }: MobileNavProps) { const [showActions, setShowActions] = useState(false) const scrollY = useScrollPosition() // Hide nav when scrolling down, show when scrolling up const [isNavVisible, setIsNavVisible] = useState(true) const [lastScrollY, setLastScrollY] = useState(0) useEffect(() => { const currentScrollY = scrollY.get() if (currentScrollY > lastScrollY && currentScrollY > 100) { setIsNavVisible(false) } else { setIsNavVisible(true) } setLastScrollY(currentScrollY) }, [scrollY, lastScrollY]) // Spring animation for nav visibility const navSpring = useSpring(0, { stiffness: 300, damping: 30 }) useEffect(() => { if (isNavVisible) { navSpring.set(0) } else { navSpring.set(100) } }, [isNavVisible, navSpring]) const navY = useTransform(navSpring, [0, 100], [0, 100]) const tabs = [ { id: "home", label: "Home", icon: }, { id: "myesim", label: "My eSIM", icon: }, { id: "profile", label: "Profile", icon: }, ] const actions = [ { id: "chat", label: "Chat", icon: , onClick: onShowChatAssistant }, { id: "voice", label: "Voice", icon: , onClick: onShowVoiceAssistant }, { id: "scan", label: "Scan", icon: , onClick: onShowImageScanner }, { id: "add", label: "Add eSIM", icon: , onClick: onAddEsim }, ] return ( <> {/* Floating action button */} setShowActions(!showActions)} > {showActions ? : } {/* Action buttons */} {showActions && ( {actions.map((action, index) => (

{action.label}

{ setShowActions(false) action.onClick?.() }} > {action.icon} ))} )} {/* Bottom navigation */}

{tabs.map((tab) => { const isActive = activeTab === tab.id return ( onTabChange(tab.id)} className={cn( "relative flex flex-1 flex-col items-center justify-center py-3", "transition-colors duration-200", isActive ? "text-accent" : "text-muted-foreground", )} whileTap={{ scale: 0.95 }} > {tab.icon} {tab.label} {isActive && ( )} ) })}

) } [V0_FILE]typescriptreact:file="components/ui/esim-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Signal, Calendar, Database, Wifi, Clock } from "lucide-react" import { cn } from "@/lib/utils" import { SwipeableCard } from "@/components/ui/swipeable-card" interface EsimCardProps { title: string status: "active" | "expired" | "pending" dataAmount: string dataUsed?: string validUntil: string network?: string planType?: string onDownload: () => void onShare: () => void onDelete: () => void onClick?: () => void className?: string } export function EsimCard({ title, status, dataAmount, dataUsed, validUntil, network = "4G/LTE", planType = "Data Only", onDownload, onShare, onDelete, onClick, className, }: EsimCardProps) { const statusColors = { active: "bg-success/20 text-success border-success/30", expired: "bg-danger/20 text-danger border-danger/30", pending: "bg-warning/20 text-warning border-warning/30", } const statusIcons = { active: , expired: , pending: , } // Calculate data usage percentage const calculateUsage = () => { if (!dataUsed) return 0 const used = Number.parseFloat(dataUsed.split(" ")[0]) const total = Number.parseFloat(dataAmount.split(" ")[0]) return Math.min((used / total) * 100, 100) } const usagePercentage = calculateUsage() // Determine background gradient based on status const getBackgroundGradient = () => { switch (status) { case "active": return "from-primary-dark to-cyan" case "expired": return "from-gray-700 to-gray-600" case "pending": return "from-amber-700 to-amber-600" default: return "from-primary-dark to-cyan" } } return (

{statusIcons[status]} {status.charAt(0).toUpperCase() + status.slice(1)}

{title}

Data

{dataAmount}

{dataUsed &&

{dataUsed} used

}

Valid Until

{validUntil}

{dataUsed && (

{usagePercentage.toFixed(0)}% used

{(100 - usagePercentage).toFixed(0)}% remaining

)}

Network {network}

Plan Type {planType}

) } [V0_FILE]typescriptreact:file="components/ui/plan-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { Check, ChevronRight, Sparkles } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface PlanCardProps { title: string price: string dataAmount: string validity: string features: string[] isFeatured?: boolean isPopular?: boolean isRecommended?: boolean onSelect: () => void className?: string } export function PlanCard({ title, price, dataAmount, validity, features, isFeatured = false, isPopular = false, isRecommended = false, onSelect, className, }: PlanCardProps) { return ( {/* Badge */} {(isPopular || isRecommended) && (

{isRecommended && } {isRecommended ? "AI Recommended" : "Popular"}

)} {/* Glowing effect for featured plans */} {isFeatured && ( )}

{title}

{price} MMK

Data {dataAmount}

Validity {validity}

Includes:

{feature}

) } [V0_FILE]typescriptreact:file="components/screens/home-screen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { Wifi, Calendar, Smartphone, Sparkles, ArrowRight, Plus, Zap, Gauge } from "lucide-react" import { Button } from "@/components/ui/button" import { ThreeDSimCard } from "@/components/ui/3d-sim-card" import { DataUsageChart } from "@/components/ui/data-usage-chart" import { AIChatAssistant } from "@/components/ui/ai-chat-assistant" import { AIVoiceAssistant } from "@/components/ui/ai-voice-assistant" import { AIImageScanner } from "@/components/ui/ai-image-scanner" import { AIRecommendationCard } from "@/components/ui/ai-recommendation-card" import { SmartNotification } from "@/components/ui/smart-notification" import { PlanCard } from "@/components/ui/plan-card" import { DynamicBackground } from "@/components/ui/dynamic-background" import { MobileHeader } from "@/components/ui/mobile-header" import { MobileNav } from "@/components/ui/mobile-nav" interface HomeScreenProps { activeTab: string onTabChange: (tab: string) => void onShowQrModal: () => void } export default function HomeScreen({ activeTab, onTabChange, onShowQrModal }: HomeScreenProps) { const [showBanner, setShowBanner] = useState(true) const [showChatAssistant, setShowChatAssistant] = useState(false) const [showVoiceAssistant, setShowVoiceAssistant] = useState(false) const [showImageScanner, setShowImageScanner] = useState(false) const [backgroundMode, setBackgroundMode] = useState<"default" | "success" | "warning" | "danger">("default") const [notifications, setNotifications] = useState< Array<{ id: string title: string message: string type: "info" | "success" | "warning" | "danger" }> >([ { id: "1", title: "AI Data Analysis", message: "Based on your usage, we recommend upgrading your plan.", type: "info", }, ]) // Change background based on data usage useEffect(() => { const dataUsed = 2.5 // GB const dataTotal = 3 // GB const usagePercentage = (dataUsed / dataTotal) * 100 if (usagePercentage > 90) { setBackgroundMode("danger") } else if (usagePercentage > 75) { setBackgroundMode("warning") } else { setBackgroundMode("default") } }, []) const usageData = [ { name: "Mon", usage: 120 }, { name: "Tue", usage: 240 }, { name: "Wed", usage: 180 }, { name: "Thu", usage: 350 }, { name: "Fri", usage: 290 }, { name: "Sat", usage: 150 }, { name: "Sun", usage: 210 }, ] const plans = [ { title: "Basic Data", price: "5,000", dataAmount: "1 GB", validity: "7 days", features: ["4G/LTE Network", "Data only", "No voice calls"], isFeatured: false, }, { title: "Standard Data", price: "10,000", dataAmount: "3 GB", validity: "15 days", features: ["4G/LTE Network", "Data only", "No voice calls", "Unlimited social media"], isFeatured: true, isPopular: true, }, { title: "Premium Data", price: "20,000", dataAmount: "10 GB", validity: "30 days", features: [ "4G/LTE Network", "Data only", "No voice calls", "Unlimited social media", "Video streaming optimized", ], isFeatured: false, }, ] const aiRecommendations = [ { title: "AI-Optimized Data Plan", description: "Personalized for your usage patterns", price: "12,500", dataAmount: "5 GB", validity: "20 days", matchScore: 95, }, ] const dismissNotification = (id: string) => { setNotifications((prev) => prev.filter((notification) => notification.id !== id)) } const handleScanComplete = (result: string) => { setShowImageScanner(false) setNotifications((prev) => [ ...prev, { id: Date.now().toString(), title: "QR Code Scanned", message: "eSIM activation code detected and processed", type: "success", }, ]) setBackgroundMode("success") // Reset background after a delay setTimeout(() => { setBackgroundMode("default") }, 3000) } return (

{}} transparent={true} />

{/* Notifications */} {notifications.length > 0 && (

{notifications.map((notification) => ( {}, }} onClose={() => dismissNotification(notification.id)} /> ))}

)} {/* Data Usage Summary */}

Data Usage

Remaining Data

2.5 GB of 3 GB

Validity

12 days left

Started: May 3, 2025 Expires: May 15, 2025

{/* Active eSIM */}

Your Active eSIM

{/* Data Usage Chart */}

{/* Quick Actions */}

Quick Actions

setShowImageScanner(true)} >

Top Up

Speed Test setShowChatAssistant(true)} >

AI Assistant

Devices

{/* AI Recommendations */}

AI Recommendations

Personalized

{aiRecommendations.map((recommendation, index) => ( ))}

{/* Popular Plans */}

Popular Plans

{plans.map((plan, index) => ( ))}

setShowChatAssistant(true)} onShowVoiceAssistant={() => setShowVoiceAssistant(true)} onShowImageScanner={() => setShowImageScanner(true)} onAddEsim={onShowQrModal} /> {/* Assistants */} setShowChatAssistant(false)} /> setShowVoiceAssistant(false)} /> setShowImageScanner(false)} onScanComplete={handleScanComplete} />

) } [V0_FILE]typescriptreact:file="components/ui/data-card.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import { motion } from "framer-motion" import { ArrowUpRight, ArrowDownRight, Minus } from "lucide-react" import { cn } from "@/lib/utils" interface DataCardProps { title: string value: string | number icon?: ReactNode description?: string trend?: { value: number isPositive?: boolean isNeutral?: boolean } className?: string onClick?: () => void } export function DataCard({ title, value, icon, description, trend, className, onClick }: DataCardProps) { const isInteractive = !!onClick return ( {/* Background gradient accent */}

{title}

{value}

{trend && ( {trend.isPositive ? ( ) : trend.isNeutral ? ( ) : ( )} {trend.value}% )}

{description &&

{description}

}

{icon &&

{icon}

}

{trend && (

)} ) } [V0_FILE]typescriptreact:file="components/ui/data-usage-chart.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, LineChart, Line, } from "recharts" import { BarChart3, LineChartIcon, AreaChartIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface DataPoint { name: string usage: number [key: string]: any } interface DataUsageChartProps { data: DataPoint[] className?: string title?: string description?: string timeRanges?: string[] } type ChartType = "area" | "bar" | "line" export function DataUsageChart({ data, className, title = "Data Usage", description, timeRanges = ["7D", "14D", "30D", "90D"], }: DataUsageChartProps) { const [chartType, setChartType] = useState("area") const [activeTimeRange, setActiveTimeRange] = useState(timeRanges[0]) // In a real app, this would filter data based on the selected time range const filteredData = data const renderChart = () => { switch (chartType) { case "area": return ( `${value} MB`} width={60} /> [`${value} MB`, "Usage"]} /> ) case "bar": return ( `${value} MB`} width={60} /> [`${value} MB`, "Usage"]} /> ) case "line": return ( `${value} MB`} width={60} /> [`${value} MB`, "Usage"]} /> ) default: return null } } return (

{title}

{description &&

{description}

}

{timeRanges.map((range) => ( ))}

{renderChart()}

) } [V0_FILE]typescriptreact:file="components/ui/stats-grid.tsx" isEdit="true" isMerged="true" "use client" import type { ReactNode } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" import { DataCard } from "@/components/ui/data-card" interface StatsGridProps { items: { title: string value: string | number icon?: ReactNode description?: string trend?: { value: number isPositive?: boolean isNeutral?: boolean } onClick?: () => void }[] columns?: 1 | 2 | 3 | 4 className?: string } export function StatsGrid({ items, columns = 2, className }: StatsGridProps) { const gridCols = { 1: "grid-cols-1", 2: "grid-cols-1 sm:grid-cols-2", 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", } return (

{items.map((item, index) => ( ))}

) } [V0_FILE]typescriptreact:file="components/ui/data-table.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { ChevronDown, ChevronUp, Search, Filter, Download, ArrowUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" interface Column { header: string accessor: keyof T cell?: (item: T) => React.ReactNode sortable?: boolean className?: string } interface DataTableProps { data: T[] columns: Column[] searchable?: boolean searchPlaceholder?: string exportable?: boolean onRowClick?: (item: T) => void emptyState?: React.ReactNode className?: string } export function DataTable>({ data, columns, searchable = false, searchPlaceholder = "Search...", exportable = false, onRowClick, emptyState, className, }: DataTableProps) { const [searchTerm, setSearchTerm] = useState("") const [sortConfig, setSortConfig] = useState<{ key: keyof T | null direction: "asc" | "desc" }>({ key: null, direction: "asc", }) const [isFiltering, setIsFiltering] = useState(false) // Handle sorting const handleSort = (key: keyof T) => { setSortConfig((prevConfig) => ({ key, direction: prevConfig.key === key && prevConfig.direction === "asc" ? "desc" : "asc", })) } // Filter and sort data const filteredData = data.filter((item) => { if (!searchTerm) return true // Search across all fields return Object.values(item).some((value) => String(value).toLowerCase().includes(searchTerm.toLowerCase())) }) const sortedData = [...filteredData].sort((a, b) => { if (!sortConfig.key) return 0 const aValue = a[sortConfig.key] const bValue = b[sortConfig.key] if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1 if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1 return 0 }) // Export data as CSV const exportData = () => { const headers = columns.map((column) => column.header).join(",") const rows = sortedData .map((item) => { return columns .map((column) => { const value = item[column.accessor] // Handle commas in values by wrapping in quotes return typeof value === "string" && value.includes(",") ? `"${value}"` : value }) .join(",") }) .join("\n") const csv = `${headers}\n${rows}` const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", "data-export.csv") link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } return (

{(searchable || exportable) && (

{searchable && (

setSearchTerm(e.target.value)} className="pl-9" />

)}

{searchable && ( )} {exportable && ( )}

)}

{columns.map((column, index) => ( ))} {sortedData.length > 0 ? ( sortedData.map((item, rowIndex) => ( onRowClick && onRowClick(item)} > {columns.map((column, colIndex) => ( ))} )) ) : ( )}

column.sortable && handleSort(column.accessor)} > {column.header} {column.sortable && ( {sortConfig.key === column.accessor ? ( sortConfig.direction === "asc" ? ( ) : ( ) ) : ( )} )}
{column.cell ? column.cell(item) : String(item[column.accessor] \|\| "")}
{emptyState \|\| ( No results found {searchTerm ? "Try adjusting your search or filters" : "No data available"} )}

) } [V0_FILE]typescriptreact:file="components/ui/data-metric.tsx" isMerged="true" "use client" import { motion } from "framer-motion" import { cn } from "@/lib/utils" interface DataMetricProps { title: string value: string | number previousValue?: string | number unit?: string change?: number changeLabel?: string isPositive?: boolean isNeutral?: boolean className?: string } export function DataMetric({ title, value, previousValue, unit, change, changeLabel, isPositive, isNeutral, className, }: DataMetricProps) { // Determine color based on change const getChangeColor = () => { if (isNeutral) return "text-muted-foreground" if (isPositive) return "text-success" return "text-danger" } // Format change with + or - sign const formatChange = () => { if (change === undefined) return null const prefix = isPositive ? "+" : isNeutral ? "±" : "-" return `${prefix}${Math.abs(change)}${unit ? unit : "%"}` } return (

{title}

{value} {unit && {unit}} {change !== undefined && ( {formatChange()} )}

{previousValue !== undefined && (

{changeLabel || "vs. previous"}: {previousValue} {unit && unit}

)} {/* Progress bar for visual representation */} {change !== undefined && !isNeutral && (

)}

) } [V0_FILE]typescriptreact:file="components/ui/data-overview.tsx" isMerged="true" "use client" import { useState } from "react" import { BarChart3, ArrowRight, Download } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DataMetric } from "@/components/ui/data-metric" import { DataUsageChart } from "@/components/ui/data-usage-chart" interface DataOverviewProps { dataUsed: number dataTotal: number daysLeft: number validUntil: string usageData: Array<{ name: string; usage: number }> className?: string onViewDetails?: () => void onExport?: () => void } export function DataOverview({ dataUsed, dataTotal, daysLeft, validUntil, usageData, className, onViewDetails, onExport, }: DataOverviewProps) { const [activeTab, setActiveTab] = useState<"overview" | "chart">("overview") // Calculate percentage used const percentUsed = Math.round((dataUsed / dataTotal) * 100) // Calculate daily average const dailyAverage = usageData.reduce((sum, day) => sum + day.usage, 0) / usageData.length // Determine if usage is high, medium, or low const getUsageStatus = () => { if (percentUsed > 80) return { status: "high", color: "text-danger" } if (percentUsed > 50) return { status: "medium", color: "text-warning" } return { status: "low", color: "text-success" } } const usageStatus = getUsageStatus() return (

Data Usage Overview

{activeTab === "overview" ? (

) : ( )}

{onViewDetails && ( )} {onExport && ( )}

) } [V0_FILE]typescriptreact:file="components/screens/data-dashboard-screen.tsx" isMerged="true" "use client" import { cn } from "@/lib/utils" import { useState } from "react" import { motion } from "framer-motion" import { BarChart3, PieChart, Smartphone, Globe, Activity, Download, Filter } from "lucide-react" import { Button } from "@/components/ui/button" import { DynamicBackground } from "@/components/ui/dynamic-background" import { MobileHeader } from "@/components/ui/mobile-header" import { MobileNav } from "@/components/ui/mobile-nav" import { DataOverview } from "@/components/ui/data-overview" import { StatsGrid } from "@/components/ui/stats-grid" import { DataTable } from "@/components/ui/data-table" interface DataDashboardScreenProps { activeTab: string onTabChange: (tab: string) => void } export default function DataDashboardScreen({ activeTab, onTabChange }: DataDashboardScreenProps) { const [selectedPeriod, setSelectedPeriod] = useState("month") // Sample data const usageData = [ { name: "Mon", usage: 120 }, { name: "Tue", usage: 240 }, { name: "Wed", usage: 180 }, { name: "Thu", usage: 350 }, { name: "Fri", usage: 290 }, { name: "Sat", usage: 150 }, { name: "Sun", usage: 210 }, ] const appUsageData = [ { app: "YouTube", usage: "1.2 GB", percentage: 40 }, { app: "Facebook", usage: "0.8 GB", percentage: 26 }, { app: "Instagram", usage: "0.5 GB", percentage: 17 }, { app: "TikTok", usage: "0.3 GB", percentage: 10 }, { app: "Others", usage: "0.2 GB", percentage: 7 }, ] const usageHistory = [ { date: "2025-05-01", dataUsed: "120 MB", app: "YouTube", time: "10:30 AM" }, { date: "2025-05-01", dataUsed: "85 MB", app: "Facebook", time: "11:45 AM" }, { date: "2025-05-02", dataUsed: "240 MB", app: "TikTok", time: "2:15 PM" }, { date: "2025-05-02", dataUsed: "65 MB", app: "Instagram", time: "4:30 PM" }, { date: "2025-05-03", dataUsed: "180 MB", app: "YouTube", time: "7:20 PM" }, { date: "2025-05-03", dataUsed: "95 MB", app: "Chrome", time: "9:10 PM" }, ] const statsItems = [ { title: "Daily Average", value: "220 MB", icon: , description: "Based on last 7 days", trend: { value: 5, isPositive: true }, }, { title: "Peak Usage", value: "350 MB", icon: , description: "Thursday, May 5", trend: { value: 12, isPositive: false }, }, { title: "Top App", value: "YouTube", icon: , description: "40% of total usage", trend: { value: 0, isNeutral: true }, }, { title: "Active Devices", value: "2", icon: , description: "iPhone, iPad", trend: { value: 0, isNeutral: true }, }, ] const tableColumns = [ { header: "Date", accessor: "date" as const, sortable: true }, { header: "Time", accessor: "time" as const, sortable: true }, { header: "App", accessor: "app" as const, sortable: true }, { header: "Data Used", accessor: "dataUsed" as const, sortable: true, cell: (item) => {item.dataUsed}, }, ] return (

onTabChange("home")} showSearch={true} showNotifications={true} transparent={true} />

{/* Period selector */}

{["week", "month", "year"].map((period) => ( ))}

{/* Data Overview */} {}} onExport={() => {}} /> {/* Stats Grid */}

Usage Statistics

{/* App Usage */}

App Usage

{appUsageData.map((app, index) => (

{app.app}

{app.usage}

{app.percentage}%

))}

{/* Usage History */}

Usage History

{}} onShowVoiceAssistant={() => {}} onShowImageScanner={() => {}} />

) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 180 100% 50%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 222.2 84% 4.9%; --radius: 0.5rem; /* Custom colors */ --primary-dark: 204 33% 18%; --primary-dark-rgb: 30, 47, 60; --accent-cyan: 180 100% 50%; --success: 142 71% 45%; --warning: 38 92% 50%; --danger: 0 84% 60%; } .dark { --background: 204 33% 18%; --foreground: 210 40% 98%; --card: 204 33% 15%; --card-foreground: 210 40% 98%; --popover: 204 33% 15%; --popover-foreground: 210 40% 98%; --primary: 204 33% 18%; --primary-foreground: 210 40% 98%; --secondary: 204 33% 25%; --secondary-foreground: 210 40% 98%; --muted: 204 33% 25%; --muted-foreground: 215 20.2% 65.1%; --accent: 180 100% 50%; --accent-foreground: 204 33% 18%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --border: 204 33% 25%; --input: 204 33% 25%; --ring: 180 100% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } /* Improved typography */ h1, h2, h3, h4, h5, h6 { @apply font-bold tracking-tight; } h1 { @apply text-3xl md:text-4xl; } h2 { @apply text-2xl md:text-3xl; } h3 { @apply text-xl md:text-2xl; } /* Focus styles */ :focus-visible { @apply outline-none ring-2 ring-accent ring-offset-2 ring-offset-background; } } /* Myanmar font class */ .myanmar-font { font-family: "Noto Sans Myanmar", sans-serif; } /* Custom animations */ @keyframes pulse-cyan { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-cyan { animation: pulse-cyan 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Gradient text */ .gradient-text { @apply bg-gradient-to-r from-cyan to-blue-400 bg-clip-text text-transparent; } /* Glass effect */ .glass-effect { @apply bg-white/10 backdrop-blur-md backdrop-saturate-150; } .glass-card { @apply rounded-xl border border-white/20 bg-white/10 backdrop-blur-md backdrop-saturate-150 shadow-lg; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { @apply bg-transparent; } ::-webkit-scrollbar-thumb { @apply rounded-full bg-muted; } ::-webkit-scrollbar-thumb:hover { @apply bg-muted-foreground/50; } /* Glow effects */ .glow-cyan { box-shadow: 0 0 15px 2px rgba(0, 255, 255, 0.3); } .glow-cyan-sm { box-shadow: 0 0 8px 1px rgba(0, 255, 255, 0.2); } .glow-text-cyan { text-shadow: 0 0 8px rgba(0, 255, 255, 0.5); } /* Animated background gradient */ .animated-gradient { background: linear-gradient( -45deg, hsl(var(--primary-dark)), hsl(204, 33%, 22%), hsl(204, 33%, 25%), hsl(180, 100%, 25%) ); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Hover effects */ .hover-scale { @apply transition-transform duration-300; } .hover-scale:hover { @apply transform scale-105; } .hover-lift { @apply transition-all duration-300; } .hover-lift:hover { @apply -translate-y-1 shadow-lg; } /* Card styles */ .card-highlight { @apply border-cyan/30 bg-gradient-to-br from-primary-dark to-primary-dark/80; } .card-highlight:hover { @apply border-cyan/50 glow-cyan-sm; } /* Button styles */ .btn-primary { @apply bg-cyan text-primary-dark hover:bg-cyan/90 active:scale-95 transition-transform; } .btn-secondary { @apply bg-primary-dark text-cyan border border-cyan/30 hover:border-cyan hover:bg-primary-dark/80; } .btn-outline { @apply border border-cyan/30 text-cyan hover:bg-cyan/10; } .btn-ghost { @apply text-foreground hover:bg-white/5 hover:text-cyan; } /* Loading animations */ .loading-dots { @apply flex space-x-1; } .loading-dots div { @apply h-2 w-2 rounded-full bg-cyan; animation: bounce 1.4s infinite ease-in-out both; } .loading-dots div:nth-child(1) { animation-delay: -0.32s; } .loading-dots div:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Responsive utilities */ .responsive-container { @apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; } .responsive-grid { @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6; } .responsive-flex { @apply flex flex-col sm:flex-row; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", dark: "hsl(var(--primary-dark))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, success: "hsl(var(--success))", warning: "hsl(var(--warning))", danger: "hsl(var(--danger))", cyan: "#00FFFF", "primary-dark": "#1E2F3C", }, backgroundColor: { "primary-dark": "#1E2F3C", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, shimmer: { "0%": { backgroundPosition: "-200% 0" }, "100%": { backgroundPosition: "200% 0" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, pulse: { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.5" }, }, glow: { "0%, 100%": { boxShadow: "0 0 5px rgba(0, 255, 255, 0.5)" }, "50%": { boxShadow: "0 0 20px rgba(0, 255, 255, 0.8)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", shimmer: "shimmer 2s linear infinite", float: "float 3s ease-in-out infinite", pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", glow: "glow 2s ease-in-out infinite", }, fontFamily: { myanmar: ["Noto Sans Myanmar", "sans-serif"], }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", "gradient-mesh": "linear-gradient(to right, #1E2F3C, #00FFFF, #1E2F3C)", }, boxShadow: { "cyan-sm": "0 0 5px rgba(0, 255, 255, 0.3)", cyan: "0 0 15px rgba(0, 255, 255, 0.5)", "cyan-lg": "0 0 30px rgba(0, 255, 255, 0.7)", }, textShadow: { cyan: "0 0 5px rgba(0, 255, 255, 0.5)", }, }, }, plugins: [ require("tailwindcss-animate"), ({ addUtilities }) => { const newUtilities = { ".text-shadow-sm": { textShadow: "0 1px 2px rgba(0, 0, 0, 0.2)", }, ".text-shadow": { textShadow: "0 2px 4px rgba(0, 0, 0, 0.2)", }, ".text-shadow-lg": { textShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", }, ".text-shadow-cyan": { textShadow: "0 0 5px rgba(0, 255, 255, 0.5)", }, } addUtilities(newUtilities) }, ], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { motion } from "framer-motion" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-cyan text-primary-dark hover:bg-cyan/90 active:scale-95 transition-transform shadow-cyan-sm hover:shadow-cyan", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-cyan/30 text-cyan hover:bg-cyan/10 hover:border-cyan", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-cyan/10 hover:text-cyan", link: "text-cyan underline-offset-4 hover:underline", success: "bg-success text-white hover:bg-success/90", warning: "bg-warning text-white hover:bg-warning/90", danger: "bg-danger text-white hover:bg-danger/90", gradient: "bg-gradient-to-r from-cyan to-blue-400 text-primary-dark hover:opacity-90", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", xl: "h-12 rounded-md px-10 text-base", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean isLoading?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => { const Comp = asChild ? Slot : motion.button return ( {isLoading ? (

{children}

) : ( children )} ) }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" const Card = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { interactive?: boolean variant?: "default" | "glass" | "highlight" | "gradient" } >(({ className, interactive = false, variant = "default", ...props }, ref) => { const Component = interactive ? motion.div : "div" const interactiveProps = interactive ? { whileHover: { scale: 1.02, y: -4 }, whileTap: { scale: 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, } : {} const variantStyles = { default: "bg-card border shadow-sm", glass: "glass-card", highlight: "card-highlight border-cyan/30 shadow-cyan-sm", gradient: "bg-gradient-to-br from-primary-dark to-primary-dark/80 border border-cyan/20 shadow-sm", } return ( ) }) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescriptreact:file="components/ui/dynamic-background.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, type ReactNode } from "react" import { motion } from "framer-motion" import { cn } from "@/lib/utils" type BackgroundMode = "default" | "success" | "warning" | "danger" | "night" | "day" | "gradient" interface DynamicBackgroundProps { children: ReactNode mode?: BackgroundMode intensity?: "subtle" | "medium" | "strong" animated?: boolean className?: string interactive?: boolean } export function DynamicBackground({ children, mode = "default", intensity = "medium", animated = true, interactive = true, className, }: DynamicBackgroundProps) { const [time, setTime] = useState<"day" | "night">("day") const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) // Determine time of day for automatic theming useEffect(() => { const checkTime = () => { const hours = new Date().getHours() setTime(hours >= 6 && hours < 18 ? "day" : "night") } checkTime() const interval = setInterval(checkTime, 60000) // Check every minute return () => clearInterval(interval) }, []) // Track mouse/touch position for parallax effect useEffect(() => { if (!animated || !interactive) return const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX / window.innerWidth, y: e.clientY / window.innerHeight, }) } const handleTouchMove = (e: TouchEvent) => { if (e.touches.length > 0) { setMousePosition({ x: e.touches[0].clientX / window.innerWidth, y: e.touches[0].clientY / window.innerHeight, }) } } window.addEventListener("mousemove", handleMouseMove) window.addEventListener("touchmove", handleTouchMove) return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("touchmove", handleTouchMove) } }, [animated, interactive]) // Determine background colors based on mode and intensity const getBackgroundStyles = () => { const intensityValues = { subtle: { opacity: 0.3, blur: 60 }, medium: { opacity: 0.5, blur: 40 }, strong: { opacity: 0.7, blur: 20 }, } const { opacity, blur } = intensityValues[intensity] // Use time-based theme if mode is default const actualMode = mode === "default" ? time : mode const gradients = { default: "from-primary-dark via-primary-dark to-secondary", day: "from-primary-dark via-primary-dark to-secondary", night: "from-[#1E2F3C] via-[#1a2a36] to-[#152330]", success: "from-green-700 via-green-600 to-emerald-500", warning: "from-amber-700 via-amber-600 to-yellow-500", danger: "from-red-700 via-red-600 to-rose-500", gradient: "from-primary-dark via-[#1a2a36] to-[#152330]", } return { gradientClasses: gradients[actualMode] || gradients.default, opacity, blur, } } const { gradientClasses, opacity, blur } = getBackgroundStyles() return (
{/* Animated background /} {/ Floating orbs/bubbles for visual interest /} {animated && ( <> {/ Additional cyan accent /} )} {/ Parallax effect on mouse/touch move /} {animated && interactive && ( )} {/ Grid pattern overlay /}
{/ Frosted glass overlay /}
{/ Content /}
{children}

) } [V0_FILE]typescriptreact:file="components/ui/3d-sim-card.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useState, useEffect } from "react" import { motion, useMotionValue, useSpring, useTransform } from "framer-motion" import { cn } from "@/lib/utils" interface ThreeDSimCardProps { title: string dataAmount: string validUntil: string className?: string onClick?: () => void } export function ThreeDSimCard({ title, dataAmount, validUntil, className, onClick }: ThreeDSimCardProps) { const cardRef = useRef(null) const [isMobile, setIsMobile] = useState(false) // Check if device is mobile useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth < 768) } checkMobile() window.addEventListener("resize", checkMobile) return () => window.removeEventListener("resize", checkMobile) }, []) // Motion values for tilt effect const x = useMotionValue(0) const y = useMotionValue(0) // Smooth spring physics for mouse/device motion const mouseX = useSpring(x, { stiffness: 300, damping: 30 }) const mouseY = useSpring(y, { stiffness: 300, damping: 30 }) // Transform mouse/device motion to rotation values const rotateX = useTransform(mouseY, [-300, 300], [15, -15]) const rotateY = useTransform(mouseX, [-300, 300], [-15, 15]) // Transform for lighting effect const brightness = useTransform(mouseY, [-300, 300], [1.2, 0.8]) // Handle mouse/touch movement const handleMouseMove = (e: React.MouseEvent | React.TouchEvent) => { if (!cardRef.current) return const rect = cardRef.current.getBoundingClientRect() // Get center of card const centerX = rect.left + rect.width / 2 const centerY = rect.top + rect.height / 2 // Get mouse/touch position let clientX, clientY if ("touches" in e) { // Touch event clientX = e.touches[0].clientX clientY = e.touches[0].clientY } else { // Mouse event clientX = e.clientX clientY = e.clientY } // Calculate distance from center x.set(clientX - centerX) y.set(clientY - centerY) } // Reset position when mouse/touch leaves const handleMouseLeave = () => { x.set(0) y.set(0) } // For mobile devices, use device orientation for tilt useEffect(() => { if (!isMobile) return const handleOrientation = (e: DeviceOrientationEvent) => { if (!e.gamma || !e.beta) return // Use device orientation for tilt effect // Limit the range to avoid extreme tilts const gammaLimited = Math.max(Math.min(e.gamma, 20), -20) const betaLimited = Math.max(Math.min(e.beta - 40, 20), -20) x.set(gammaLimited 15) // Adjust multiplier for sensitivity y.set(betaLimited * 15) } window.addEventListener("deviceorientation", handleOrientation) return () => window.removeEventListener("deviceorientation", handleOrientation) }, [isMobile, x, y]) return ( {/* Background gradient with animated movement /} {/ Holographic effect overlay /} {/ Card content with 3D effect /}

eSIM

{title}

Data

{dataAmount}

Valid Until

{validUntil}

ID

8901 2345 6789 0123 45

{/ Animated chip /}
) } [V0_FILE]typescriptreact:file="components/ui/ai-chat-assistant.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type as React from "react" import { useState, useRef, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Send, Mic, X, Bot, Paperclip, Sparkles } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface Message { id: string content: string role: "user" | "assistant" timestamp: Date attachments?: { type: "image" | "file"; url: string; name?: string }[] isLoading?: boolean } interface AIChatAssistantProps { isOpen: boolean onClose: () => void className?: string initialMessage?: string } export function AIChatAssistant({ isOpen, onClose, className, initialMessage }: AIChatAssistantProps) { const [messages, setMessages] = useState([ { id: "1", content: initialMessage || "မင်္ဂလာပါ။ eSIM Myanmar မှ ကြိုဆိုပါတယ်။ ဘယ်လိုကူညီပေးရမလဲ?", role: "assistant", timestamp: new Date(), }, ]) const [input, setInput] = useState("") const [isRecording, setIsRecording] = useState(false) const [isTyping, setIsTyping] = useState(false) const [isAttaching, setIsAttaching] = useState(false) const [suggestedQuestions, setSuggestedQuestions] = useState([ "eSIM ကို ဘယ်လို activate လုပ်ရမလဲ?", "eSIM နဲ့ သုံးလို့ရတဲ့ ဖုန်းတွေက ဘာတွေလဲ?", "eSIM ဝယ်ယူရန် ဘယ်လိုလုပ်ရမလဲ?", ]) const messagesEndRef = useRef(null) const fileInputRef = useRef(null) // Sample responses for demo purposes const sampleResponses = [ "eSIM ကို ဘယ်လိုအသုံးပြုရမလဲဆိုတာ အဆင့်ဆင့် ရှင်းပြပေးပါမယ်။ ပထမဦးစွာ သင့်ဖုန်းရဲ့ Settings ကိုသွားပါ။ ထို့နောက် Mobile Data သို့မဟုတ် Cellular ကို ရွေးပါ။ Add eSIM ကို နှိပ်ပြီး QR code ကို scan ဖတ်ပါ။", "သင့်ရဲ့ eSIM ကို အောင်မြင်စွာ activate လုပ်ပြီးပါပြီ။ ယခု သင့်ဖုန်းတွင် eSIM Myanmar ဝန်ဆောင်မှုကို စတင်အသုံးပြုနိုင်ပါပြီ။ အခြားအကူအညီလိုအပ်ပါက ကျွန်ုပ်တို့ကို ဆက်သွယ်နိုင်ပါတယ်။", "eSIM အသုံးပြုရာတွင် အခက်အခဲရှိပါက ကျွန်ုပ်တို့ကို ဆက်သွယ်နိုင်ပါတယ်။ ဖုန်းနံပါတ် 09-123456789 သို့ ဆက်သွယ်ပါ သို့မဟုတ် support@esimmyanmar.com သို့ အီးမေးလ်ပို့နိုင်ပါတယ်။", "eSIM Myanmar မှ နောက်ဆုံးပေါ် ပရိုမိုးရှင်းများကို ကြည့်ရှုလိုပါက ပင်မစာမျက်နှာသို့ သွားပါ။ လက်ရှိတွင် ဒေတာပလန် ဝယ်ယူမှုအပေါ် 20% လျှော့စျေးပေးထားပါတယ်။", ] useEffect(() => { scrollToBottom() }, [messages]) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } const handleSend = () => { if (input.trim() === "") return // Add user message const userMessage: Message = { id: Date.now().toString(), content: input, role: "user", timestamp: new Date(), } setMessages((prev) => [...prev, userMessage]) setInput("") // Add loading message const loadingMessage: Message = { id: (Date.now() + 1).toString(), content: "", role: "assistant", timestamp: new Date(), isLoading: true, } setMessages((prev) => [...prev, loadingMessage]) // Simulate AI typing setTimeout(() => { // Remove loading message setMessages((prev) => prev.filter((msg) => !msg.isLoading)) // Add AI response const randomResponse = sampleResponses[Math.floor(Math.random() * sampleResponses.length)] const aiMessage: Message = { id: (Date.now() + 2).toString(), content: randomResponse, role: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, aiMessage]) // Generate new suggested questions setSuggestedQuestions([ "eSIM ရဲ့ အားသာချက်များကို သိလိုပါတယ်", "eSIM နဲ့ နိုင်ငံတကာမှာ သုံးလို့ရပါသလား?", "eSIM ဝယ်ယူရန် ဘယ်လိုငွေပေးချေရမလဲ?", ]) }, 2000) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSend() } } const toggleRecording = () => { setIsRecording(!isRecording) // Simulate voice recognition if (!isRecording) { setTimeout(() => { setInput("eSIM ကို ဘယ်လို activate လုပ်ရမလဲ?") setIsRecording(false) }, 2000) } } const handleAttachClick = () => { fileInputRef.current?.click() } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file) return // Simulate file upload setIsAttaching(true) setTimeout(() => { const userMessage: Message = { id: Date.now().toString(), content: "I've sent you a file.", role: "user", timestamp: new Date(), attachments: [ { type: file.type.startsWith("image/") ? "image" : "file", url: "/placeholder.svg?height=200&width=200", name: file.name, }, ], } setMessages((prev) => [...prev, userMessage]) setIsAttaching(false) // Reset file input if (fileInputRef.current) { fileInputRef.current.value = "" } }, 1500) } const handleSuggestedQuestion = (question: string) => { setInput(question) // Auto-send after a short delay setTimeout(() => { handleSend() }, 500) } return ( {isOpen && ( {/* Header /}

eSIM AI Assistant

Online

{/ Messages /}

{messages.map((message) => (
{message.isLoading ? (

) : ( <>
{message.content}
{/ Attachments /} {message.attachments?.map((attachment, index) => (
{attachment.type === "image" ? (

) : (
{attachment.name || "File"}
)}
))}
{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
)}
))}

{/ Suggested Questions /} {suggestedQuestions.length > 0 && messages[messages.length - 1]?.role === "assistant" && !messages[messages.length - 1]?.isLoading && (

Suggested questions:

{suggestedQuestions.map((question, index) => ( handleSuggestedQuestion(question)} > {question} ))}

)} {/ Input /}

setInput(e.target.value)} onKeyDown={handleKeyDown} placeholder="Type a message..." className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />

Powered by eSIM Myanmar AI

)} ) } [V0_FILE]typescriptreact:file="components/ui/ai-voice-assistant.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { Mic, MicOff, X, Volume2, VolumeX, Sparkles, Pause, Play } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface AIVoiceAssistantProps { isOpen: boolean onClose: () => void className?: string } export function AIVoiceAssistant({ isOpen, onClose, className }: AIVoiceAssistantProps) { const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState("") const [response, setResponse] = useState("") const [isSpeaking, setIsSpeaking] = useState(false) const [isPaused, setIsPaused] = useState(false) const [visualizerData, setVisualizerData] = useState(Array(30).fill(5)) const [suggestions, setSuggestions] = useState([ "eSIM ကို ဘယ်လို activate လုပ်ရမလဲ?", "eSIM နဲ့ သုံးလို့ရတဲ့ ဖုန်းတွေက ဘာတွေလဲ?", "eSIM ဝယ်ယူရန် ဘယ်လိုလုပ်ရမလဲ?", ]) const animationRef = useRef() const typingRef = useRef() useEffect(() => { if (isListening) { // Simulate microphone input with random visualizer data animationRef.current = window.requestAnimationFrame(updateVisualizer) } else { if (animationRef.current) { window.cancelAnimationFrame(animationRef.current) } setVisualizerData(Array(30).fill(5)) } return () => { if (animationRef.current) { window.cancelAnimationFrame(animationRef.current) } if (typingRef.current) { clearTimeout(typingRef.current) } } }, [isListening]) const updateVisualizer = () => { setVisualizerData((prev) => prev.map(() => (isListening ? Math.floor(Math.random() 50) + 5 : 5))) animationRef.current = window.requestAnimationFrame(updateVisualizer) } const toggleListening = () => { if (isListening) { stopListening() } else { startListening() } } const startListening = () => { setIsListening(true) setTranscript("") setResponse("") // Simulate voice recognition setTimeout(() => { setTranscript("eSIM ကို ဘယ်လို activate လုပ်ရမလဲ?") setTimeout(() => { stopListening() setTimeout(() => { respondToQuery() }, 500) }, 2000) }, 1500) } const stopListening = () => { setIsListening(false) } const respondToQuery = () => { setIsSpeaking(true) // Simulate AI response generation const fullResponse = "eSIM ကို activate လုပ်ရန် အဆင့်များမှာ - ၁) Settings သို့သွားပါ ၂) Mobile Data ကိုရွေးပါ ၃) Add eSIM ကိုနှိပ်ပါ ၄) QR code ကိုစကင်ဖတ်ပါ ၅) Activation ပြီးစီးသည်အထိ စောင့်ပါ။ အခက်အခဲရှိပါက ကျွန်ုပ်တို့ကို ဆက်သွယ်နိုင်ပါသည်။" let currentText = "" let index = 0 const typeWriter = () => { if (index < fullResponse.length && !isPaused) { currentText += fullResponse.charAt(index) setResponse(currentText) index++ typingRef.current = setTimeout(typeWriter, 30) } else if (index >= fullResponse.length) { setTimeout(() => { setIsSpeaking(false) // Update suggestions after response setSuggestions(["eSIM ရဲ့ အားသာချက်များကို သိလိုပါတယ်", "eSIM နဲ့ နိုင်ငံတကာမှာ သုံးလို့ရပါသလား?", "eSIM ဝယ်ယူရန် ဘယ်လိုငွေပေးချေရမလဲ?"]) }, 1000) } } typeWriter() } const toggleSpeaking = () => { setIsSpeaking(!isSpeaking) } const togglePause = () => { setIsPaused(!isPaused) if (isPaused) { // Resume typing respondToQuery() } } const handleSuggestionClick = (suggestion: string) => { setTranscript(suggestion) setResponse("") // Clear any existing timeouts if (typingRef.current) { clearTimeout(typingRef.current) } // Simulate processing setTimeout(() => { respondToQuery() }, 1000) } return ( {isOpen && ( {/* Header /}

eSIM Voice Assistant

{isListening ? "Listening..." : isSpeaking ? "Speaking..." : "Ready"}

{/ Voice Visualizer /}

{visualizerData.map((height, index) => ( ))}

{/ Content /}
{transcript && (

You said:

{transcript}

)} {response && (

Assistant:

{response}

)} {/ Suggestions /} {suggestions.length > 0 && response && !isListening && (

Try asking:

{suggestions.map((suggestion, index) => ( handleSuggestionClick(suggestion)} > {suggestion} ))}

)}
{/ Controls /}
{response && ( )} {isSpeaking && ( )}

Powered by eSIM Myanmar AI

)} ) } [V0_FILE]typescriptreact:file="components/ui/ai-data-analysis.tsx" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { BarChart3, PieChart, LineChart, Sparkles, ArrowRight, Download, RefreshCw, AlertTriangle, TrendingUp, TrendingDown, Info, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { DataUsageChart } from "@/components/ui/data-usage-chart" interface AIDataAnalysisProps { className?: string userData?: { dataUsage: Array<{ name: string; usage: number }> dataTotal: number dataUsed: number daysLeft: number } onRefresh?: () => void onDownload?: () => void } export function AIDataAnalysis({ className, userData = { dataUsage: [ { name: "Mon", usage: 120 }, { name: "Tue", usage: 240 }, { name: "Wed", usage: 180 }, { name: "Thu", usage: 350 }, { name: "Fri", usage: 290 }, { name: "Sat", usage: 150 }, { name: "Sun", usage: 210 }, ], dataTotal: 3, dataUsed: 2.5, daysLeft: 12, }, onRefresh, onDownload, }: AIDataAnalysisProps) { const [isAnalyzing, setIsAnalyzing] = useState(false) const [insights, setInsights] = useState< Array<{ id: string title: string description: string type: "info" | "warning" | "success" | "danger" icon: React.ReactNode }> >([ { id: "1", title: "Usage Pattern Detected", description: "Your data usage peaks on Thursdays and Fridays. Consider scheduling large downloads on weekends when usage is lower.", type: "info", icon: , }, { id: "2", title: "Data Warning", description: "At your current usage rate, you'll run out of data 2 days before your plan renews. Consider activating data saving mode.", type: "warning", icon: , }, { id: "3", title: "Optimization Opportunity", description: "We've detected 15% of your data is used by background apps. Adjust your settings to save up to 450MB monthly.", type: "success", icon: , }, ]) const [chartType, setChartType] = useState<"bar" | "line" | "pie">("line") const refreshAnalysis = () => { setIsAnalyzing(true) // Simulate analysis setTimeout(() => { setInsights([ { id: "1", title: "New Usage Pattern", description: "Your weekend data usage has increased by 30% compared to last month. This might be due to increased streaming activity.", type: "info", icon: , }, { id: "2", title: "Data Warning", description: "At your current usage rate, you'll run out of data 3 days before your plan renews. Consider upgrading your plan.", type: "warning", icon: , }, { id: "3", title: "Efficiency Recommendation", description: "Switching to WiFi during your peak usage hours (8-10PM) could save you up to 25% of your data.", type: "success", icon: , }, ]) setIsAnalyzing(false) if (onRefresh) onRefresh() }, 2000) } // Calculate percentage used const percentUsed = Math.round((userData.dataUsed / userData.dataTotal) 100) // Calculate daily average const dailyAverage = userData.dataUsage.reduce((sum, day) => sum + day.usage, 0) / userData.dataUsage.length // Calculate projected usage const projectedUsage = (dailyAverage * 30) / 1024 // Convert to GB // Determine if user will exceed data limit const willExceedLimit = projectedUsage > userData.dataTotal return (

AI Data Analysis

Smart insights based on your usage patterns
{/* Usage Summary /}

Data Used

{userData.dataUsed} GB / {userData.dataTotal} GB

Projected Usage

{projectedUsage.toFixed(1)} GB {willExceedLimit ? ( <> +{(projectedUsage - userData.dataTotal).toFixed(1)} GB ) : ( <> -{(userData.dataTotal - projectedUsage).toFixed(1)} GB )}

{willExceedLimit ? "You may exceed your data limit" : "You're on track to stay within your limit"}

{/ Chart Controls /}

{/ Chart /}

{/ AI Insights /}

AI INSIGHTS

{insights.map((insight, index) => (

{insight.icon}

{insight.title}

{insight.description}

))}

) } [V0_FILE]typescriptreact:file="components/ui/ai-form-assistant.tsx" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Sparkles, X, Check, AlertTriangle, Lightbulb } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface AIFormAssistantProps { fieldName?: string fieldType?: "text" | "email" | "phone" | "address" | "payment" value?: string suggestions?: string[] className?: string onSuggestionSelect?: (suggestion: string) => void onDismiss?: () => void } export function AIFormAssistant({ fieldName = "phone", fieldType = "phone", value = "", suggestions = [], className, onSuggestionSelect, onDismiss, }: AIFormAssistantProps) { const [isVisible, setIsVisible] = useState(true) const [assistantType, setAssistantType] = useState<"suggestion" | "validation" | "tip">("suggestion") const [message, setMessage] = useState("") const [autoSuggestions, setAutoSuggestions] = useState(suggestions) useEffect(() => { // Determine assistant type based on field and value if (value) { if (fieldType === "phone" && !value.startsWith("09")) { setAssistantType("validation") setMessage("Myanmar phone numbers typically start with '09'") } else if (fieldType === "email" && !value.includes("@")) { setAssistantType("validation") setMessage("Please enter a valid email address") } else { setAssistantType("tip") setMessage(getFieldTip(fieldType)) } } else { setAssistantType("suggestion") setAutoSuggestions(getDefaultSuggestions(fieldType)) } }, [fieldType, value]) const getFieldTip = (type: string): string => { switch (type) { case "phone": return "Your phone number will be used for account verification and eSIM activation" case "email": return "We'll send your eSIM activation details to this email" case "address": return "Your address is used for billing purposes only" case "payment": return "Your payment information is securely processed and encrypted" default: return "Fill out this field to continue" } } const getDefaultSuggestions = (type: string): string[] => { switch (type) { case "phone": return ["09123456789", "09987654321"] case "email": return ["example@gmail.com", "example@yahoo.com"] case "address": return ["Yangon, Myanmar", "Mandalay, Myanmar"] default: return suggestions.length > 0 ? suggestions : ["Suggestion 1", "Suggestion 2"] } } const handleDismiss = () => { setIsVisible(false) if (onDismiss) onDismiss() } const handleSuggestionClick = (suggestion: string) => { if (onSuggestionSelect) onSuggestionSelect(suggestion) } if (!isVisible) return null return (

{assistantType === "suggestion" ? ( ) : assistantType === "validation" ? ( ) : ( )}

{assistantType === "suggestion" ? `Suggestions for ${fieldName}` : assistantType === "validation" ? "Validation" : "Helpful Tip"}
{message &&
{message}
} {assistantType === "suggestion" && autoSuggestions.length > 0 && (
{autoSuggestions.map((suggestion, index) => ( handleSuggestionClick(suggestion)} > {suggestion} ))}
)}

) } [V0_FILE]typescriptreact:file="components/ui/ai-smart-search.tsx" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import { Search, X, Sparkles, Clock, ArrowRight, Loader2 } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" interface SearchResult { id: string title: string description?: string type: "plan" | "faq" | "support" | "location" icon?: React.ReactNode url?: string } interface AISmartSearchProps { onSearch?: (query: string) => void onResultClick?: (result: SearchResult) => void className?: string placeholder?: string autoFocus?: boolean } export function AISmartSearch({ onSearch, onResultClick, className, placeholder = "Search for plans, FAQs, support...", autoFocus = false, }: AISmartSearchProps) { const [query, setQuery] = useState("") const [isSearching, setIsSearching] = useState(false) const [showResults, setShowResults] = useState(false) const [recentSearches, setRecentSearches] = useState([ "How to activate eSIM", "Data plans", "International roaming", ]) const [results, setResults] = useState([]) const [aiSuggestions, setAiSuggestions] = useState([]) const inputRef = useRef(null) const resultsRef = useRef(null) useEffect(() => { if (autoFocus && inputRef.current) { inputRef.current.focus() } // Add click outside listener to close results const handleClickOutside = (e: MouseEvent) => { if ( resultsRef.current && !resultsRef.current.contains(e.target as Node) && inputRef.current && !inputRef.current.contains(e.target as Node) ) { setShowResults(false) } } document.addEventListener("mousedown", handleClickOutside) return () => document.removeEventListener("mousedown", handleClickOutside) }, [autoFocus]) useEffect(() => { if (query.length > 1) { setIsSearching(true) setShowResults(true) // Simulate search delay const timer = setTimeout(() => { performSearch(query) setIsSearching(false) }, 500) return () => clearTimeout(timer) } else { setResults([]) setAiSuggestions([]) } }, [query]) const performSearch = (searchQuery: string) => { // Simulate search results const searchResults: SearchResult[] = [ { id: "1", title: "Standard Data Plan", description: "3GB data, valid for 30 days", type: "plan", icon: , }, { id: "2", title: "How to activate your eSIM", description: "Step-by-step guide for activation", type: "faq", icon: , }, { id: "3", title: "Contact Customer Support", description: "Get help with your eSIM issues", type: "support", icon: , }, ] // Filter results based on query const filteredResults = searchResults.filter( (result) => result.title.toLowerCase().includes(searchQuery.toLowerCase()) || (result.description && result.description.toLowerCase().includes(searchQuery.toLowerCase())), ) setResults(filteredResults) // Generate AI suggestions setAiSuggestions([ "View all data plans with international roaming", "Find eSIMs compatible with iPhone 15", "Compare data plans under 10,000 MMK", ]) if (onSearch) onSearch(searchQuery) } const handleResultClick = (result: SearchResult) => { setShowResults(false) // Add to recent searches if not already there if (!recentSearches.includes(result.title)) { setRecentSearches((prev) => [result.title, ...prev.slice(0, 4)]) } if (onResultClick) onResultClick(result) } const handleRecentSearchClick = (search: string) => { setQuery(search) performSearch(search) } const handleClearSearch = () => { setQuery("") setShowResults(false) setResults([]) setAiSuggestions([]) inputRef.current?.focus() } return (

setQuery(e.target.value)} onFocus={() => setShowResults(true)} className="pl-9 pr-9" /> {query && ( )}
{showResults && ( {isSearching ? (
Searching...
) : query.length > 1 ? (
{/ Search Results /} {results.length > 0 ? (

SEARCH RESULTS
{results.map((result) => ( handleResultClick(result)} >
{result.icon}

{result.title}
{result.description && (
{result.description}
)}
))}
) : (

No results found for "{query}"

)} {/ AI Suggestions /} {aiSuggestions.length > 0 && (

AI SUGGESTIONS
{aiSuggestions.map((suggestion, index) => ( setQuery(suggestion)} >
{suggestion}
))}
)}
) : (
{/ Recent Searches /} {recentSearches.length > 0 && (

RECENT SEARCHES
{recentSearches.map((search, index) => ( handleRecentSearchClick(search)} >
{search}
))}
)}
)} )}
) } [V0_FILE]typescriptreact:file="components/ui/ai-image-scanner.tsx" isEdit="true" "use client" import { useState, useRef } from "react" import type React from "react" import { motion, AnimatePresence } from "framer-motion" import { Camera, X, Check, RefreshCw, Sparkles, ImageIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface AIImageScannerProps { isOpen: boolean onClose: () => void onScanComplete: (result: string) => void className?: string allowUpload?: boolean } export function AIImageScanner({ isOpen, onClose, onScanComplete, className, allowUpload = true, }: AIImageScannerProps) { const [isScanning, setIsScanning] = useState(false) const [scanComplete, setScanComplete] = useState(false) const [scanResult, setScanResult] = useState("") const [scanProgress, setScanProgress] = useState(0) const [scanMode, setScanMode] = useState<"camera" | "upload">("camera") const [uploadedImage, setUploadedImage] = useState(null) const scannerRef = useRef(null) const fileInputRef = useRef(null) const startScan = () => { setIsScanning(true) setScanComplete(false) setScanResult("") setScanProgress(0) // Simulate scanning progress const interval = setInterval(() => { setScanProgress((prev) => { const newProgress = prev + 5 if (newProgress >= 100) { clearInterval(interval) completeScan() return 100 } return newProgress }) }, 100) } const completeScan = () => { setIsScanning(false) setScanComplete(true) setScanResult("eSIM QR Code detected: LPA:1$smdp.esimmyanmar.com$ABC123XYZ") // Notify parent component setTimeout(() => { onScanComplete("LPA:1$smdp.esimmyanmar.com$ABC123XYZ") }, 1500) } const resetScan = () => { setIsScanning(false) setScanComplete(false) setScanResult("") setScanProgress(0) setUploadedImage(null) } const handleFileUpload = () => { fileInputRef.current?.click() } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file) return // Create a preview URL const imageUrl = URL.createObjectURL(file) setUploadedImage(imageUrl) setScanMode("upload") // Start scanning the uploaded image startScan() } return ( {isOpen && ( {/ Header /}

AI QR Scanner

{/ Scanner Viewport /}

{/ Scanner Overlay /}

{/ Scanning Animation /} {isScanning && ( )} {/ Scan Complete Overlay /} {scanComplete && (

)}

{/ Progress Bar /} {isScanning && (

)} {/ Result & Controls /}
{scanResult ? (

Scan Result:

{scanResult}

) : (
{isScanning ? "Scanning... Please hold steady" : "Position QR code in the center of the frame"}
)}
{scanComplete ? ( ) : (
{allowUpload && ( <> )}
)}

Powered by eSIM Myanmar AI

)} ) } [V0_FILE]typescriptreact:file="components/ui/ai-recommendation-card.tsx" isEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Sparkles, ChevronRight, ThumbsUp, ThumbsDown, X, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" interface AIRecommendationCardProps { title: string description: string price: string dataAmount: string validity: string matchScore: number features?: string[] onSelect: () => void onFeedback?: (type: "like" | "dislike", reason?: string) => void className?: string } export function AIRecommendationCard({ title, description, price, dataAmount, validity, matchScore, features = [], onSelect, onFeedback, className, }: AIRecommendationCardProps) { const [expanded, setExpanded] = useState(false) const [feedback, setFeedback] = useState<"like" | "dislike" | null>(null) const [showFeedbackForm, setShowFeedbackForm] = useState(false) const [feedbackReason, setFeedbackReason] = useState("") const [feedbackOptions] = useState<{ [key: string]: string[] }>({ like: ["Perfect for my needs", "Good value for money", "Matches my usage pattern"], dislike: ["Too expensive", "Not enough data", "Too short validity period"], }) const toggleExpand = () => { setExpanded(!expanded) } const handleFeedback = (type: "like" | "dislike") => { setFeedback(type) setShowFeedbackForm(true) } const submitFeedback = (reason?: string) => { if (onFeedback && feedback) { onFeedback(feedback, reason || feedbackReason) } setShowFeedbackForm(false) } return (

{matchScore}% Match

{title}

{description}

Price

{price} MMK

Data

{dataAmount}

Validity

{validity}

Why we recommend this:

{features.length > 0 ? ( features.map((feature, index) => (
• {feature}
)) ) : ( <>
• Based on your usage patterns

• Optimized for your frequent apps

• Matches your budget preferences
)}

{feedback === null && !showFeedbackForm ? ( <> ) : showFeedbackForm ? (
Why?
) : (
{feedback === "like" ? "Thanks for your feedback!" : "We'll improve our recommendations"}
)}

{/ Feedback options /} {showFeedbackForm && feedback && (
{feedbackOptions[feedback].map((option, index) => ( submitFeedback(option)} > {option} ))}
)}

) } [V0_FILE]typescriptreact:file="components/ui/ai-usage-insights.tsx" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Sparkles, TrendingUp, TrendingDown, AlertTriangle, Info, ChevronRight, ChevronLeft, RefreshCw, Download, } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" interface Insight { id: string title: string description: string type: "info" | "warning" | "success" | "danger" icon: React.ReactNode actions?: Array<{ label: string onClick: () => void }> } interface AIUsageInsightsProps { className?: string onRefresh?: () => void onDownload?: () => void } export function AIUsageInsights({ className, onRefresh, onDownload }: AIUsageInsightsProps) { const [isLoading, setIsLoading] = useState(false) const [currentInsightIndex, setCurrentInsightIndex] = useState(0) const [insights, setInsights] = useState([ { id: "1", title: "Usage Pattern Detected", description: "Your data usage peaks between 8-10PM. Consider downloading large files during off-peak hours (2-5AM) when network speeds are faster.", type: "info", icon: , actions: [ { label: "Set Download Reminder", onClick: () => console.log("Set reminder"), }, ], }, { id: "2", title: "Data Warning", description: "At your current rate, you'll use 90% of your data before your plan expires. Consider activating data saving mode in your settings.", type: "warning", icon: , actions: [ { label: "Enable Data Saving", onClick: () => console.log("Enable data saving"), }, ], }, { id: "3", title: "Savings Opportunity", description: "Based on your usage pattern, switching to our 'Weekend Plus' plan could save you 3,500 MMK per month.", type: "success", icon: , actions: [ { label: "View Recommended Plan", onClick: () => console.log("View plan"), }, ], }, ]) const refreshInsights = () => { setIsLoading(true) // Simulate loading setTimeout(() => { setInsights([ { id: "4", title: "New Usage Pattern", description: "We've detected increased video streaming (40% of your usage). Our 'Video Booster' add-on gives you unlimited streaming for popular apps.", type: "info", icon: , actions: [ { label: "Add Video Booster", onClick: () => console.log("Add booster"), }, ], }, { id: "5", title: "International Usage Detected", description: "You've used data in Thailand recently. Our 'ASEAN Traveler' package offers better rates for regional travel.", type: "warning", icon: , actions: [ { label: "View Travel Packages", onClick: () => console.log("View packages"), }, ], }, { id: "6", title: "Loyalty Reward Available", description: "You've been with us for 6 months! Claim your free 1GB data bonus in the rewards section.", type: "success", icon: , actions: [ { label: "Claim Reward", onClick: () => console.log("Claim reward"), }, ], }, ]) setIsLoading(false) setCurrentInsightIndex(0) if (onRefresh) onRefresh() }, 1500) } const nextInsight = () => { setCurrentInsightIndex((prev) => (prev === insights.length - 1 ? 0 : prev + 1)) } const prevInsight = () => { setCurrentInsightIndex((prev) => (prev === 0 ? insights.length - 1 : prev - 1)) } const currentInsight = insights[currentInsightIndex] return (

AI Usage Insights

Smart recommendations based on your usage patterns

{currentInsight.icon}

{currentInsight.title}

{currentInsight.description}
{currentInsight.actions && currentInsight.actions.length > 0 && (
{currentInsight.actions.map((action, index) => ( ))}
)}

{/ Navigation buttons /} {insights.length > 1 && ( <> )}
{/ Pagination dots /} {insights.length > 1 && (
{insights.map((_, index) => (
)}

Powered by eSIM Myanmar AI

) } [V0_FILE]typescriptreact:file="components/screens/ai-showcase-screen.tsx" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Sparkles, MessageSquare, Mic, Camera, Search, FileText } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { DynamicBackground } from "@/components/ui/dynamic-background" import { MobileHeader } from "@/components/ui/mobile-header" import { MobileNav } from "@/components/ui/mobile-nav" import { AIChatAssistant } from "@/components/ui/ai-chat-assistant" import { AIVoiceAssistant } from "@/components/ui/ai-voice-assistant" import { AIImageScanner } from "@/components/ui/ai-image-scanner" import { AIRecommendationCard } from "@/components/ui/ai-recommendation-card" import { AISmartSearch } from "@/components/ui/ai-smart-search" import { AIFormAssistant } from "@/components/ui/ai-form-assistant" import { AIDataAnalysis } from "@/components/ui/ai-data-analysis" import { AIUsageInsights } from "@/components/ui/ai-usage-insights" import { Input } from "@/components/ui/input" interface AIShowcaseScreenProps { activeTab: string onTabChange: (tab: string) => void onNavigate: (screen: string) => void } export default function AIShowcaseScreen({ activeTab, onTabChange, onNavigate }: AIShowcaseScreenProps) { const [showChatAssistant, setShowChatAssistant] = useState(false) const [showVoiceAssistant, setShowVoiceAssistant] = useState(false) const [showImageScanner, setShowImageScanner] = useState(false) const [phoneValue, setPhoneValue] = useState("") return (
onNavigate("home")} showSearch={true} showNotifications={true} transparent={true} />

{/ Hero Section /}
AI-Powered Features Explore our intelligent tools designed to enhance your eSIM experience
{/ AI Assistants /}

AI Assistants

Chat Assistant
Get instant help with your eSIM questions

Voice Assistant
Speak naturally to control your eSIM settings

{/ AI Tools /}

AI Tools

QR Scanner
Scan QR codes to activate your eSIM

Smart Search
Find exactly what you need with AI-powered search

{/ AI Form Assistant Demo /}

AI Form Assistant

Form Assistant
Get help filling out forms with AI suggestions
Phone Number setPhoneValue(e.target.value)} /> setPhoneValue(suggestion)} />

{/ AI Data Analysis /}

AI Data Analysis

{/ AI Usage Insights /}

AI Usage Insights

{/ AI Recommendations /}

AI Recommendations
{}} />

setShowChatAssistant(true)} onShowVoiceAssistant={() => setShowVoiceAssistant(true)} onShowImageScanner={() => setShowImageScanner(true)} /> {/ AI Assistants */} setShowChatAssistant(false)} initialMessage="Welcome to the eSIM Myanmar AI Assistant! How can I help you today?" /> setShowVoiceAssistant(false)} /> setShowImageScanner(false)} onScanComplete={(result) => { console.log("Scan result:", result) setShowImageScanner(false) }} />
) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useEffect, useState } from "react" import { AnimatePresence } from "framer-motion" import LoadingScreen from "@/components/screens/loading-screen" import WelcomeScreen from "@/components/screens/welcome-screen" import LoginScreen from "@/components/screens/login-screen" import RegisterScreen from "@/components/screens/register-screen" import HomeScreen from "@/components/screens/home-screen" import MyEsimScreen from "@/components/screens/my-esim-screen" import ProfileScreen from "@/components/screens/profile-screen" import QrCheckoutModal from "@/components/modals/qr-checkout-modal" import OrderConfirmationScreen from "@/components/screens/order-confirmation-screen" import PinVerificationScreen from "@/components/screens/pin-verification-screen" import CreatePinScreen from "@/components/screens/create-pin-screen" import BiometricAuthScreen from "@/components/screens/biometric-auth-screen" import DataDashboardScreen from "@/components/screens/data-dashboard-screen" import AIShowcaseScreen from "@/components/screens/ai-showcase-screen" export default function Home() { const [currentScreen, setCurrentScreen] = useState("loading") const [showQrModal, setShowQrModal] = useState(false) const [activeTab, setActiveTab] = useState("home") useEffect(() => { // Simulate loading time const timer = setTimeout(() => { setCurrentScreen("welcome") }, 2000) return () => clearTimeout(timer) }, []) const handleNavigation = (screen: string) => { setCurrentScreen(screen) } const handleTabChange = (tab: string) => { setActiveTab(tab) if (tab === "home") setCurrentScreen("home") if (tab === "myesim") setCurrentScreen("myesim") if (tab === "profile") setCurrentScreen("profile") } const renderScreen = () => { switch (currentScreen) { case "loading": return case "welcome": return case "login": return case "register": return case "create-pin": return handleNavigation("home")} /> case "verify-pin": case "pin-verification": return handleNavigation("home")} /> case "biometric-auth": return handleNavigation("home")} /> case "home": return ( setShowQrModal(true)} /> ) case "myesim": return ( setShowQrModal(true)} /> ) case "profile": return case "confirmation": return case "data-dashboard": return case "ai-showcase": return default: return } } return (
{renderScreen()} {showQrModal && ( setShowQrModal(false)} onSuccess={() => { setShowQrModal(false) setCurrentScreen("confirmation") }} /> )}
) }

Activate eSIM

Welcome to eSIM Myanmar

{title}

Enter PIN

{step === "create" ? "Create PIN" : "Confirm PIN"}

Register

{biometricType === "fingerprint" ? "Fingerprint Authentication" : "Face ID Authentication"}

{biometricType === "fingerprint" ? "Scanning Fingerprint..." : "Scanning Face..."}

Authentication Successful

Authentication Failed

Biometric Authentication

{step === "phone" ? "Login" : "Enter PIN"}

Profile

User Name

APPEARANCE

Theme

Language

SETTINGS

Active eSIM

All eSIMs

{esim.title}

No eSIMs Found

{title}

{title}

Data Usage

Your Active eSIM

Quick Actions

AI Recommendations

Popular Plans

{title}

{title}

{title}

Data Usage Overview

Usage Statistics

App Usage

Usage History

{title}

eSIM AI Assistant

eSIM Voice Assistant

AI INSIGHTS

{insight.title}

{assistantType === "suggestion" ? `Suggestions for ${fieldName}` : assistantType === "validation" ? "Validation" : "Helpful Tip"}

AI QR Scanner

{title}

{currentInsight.title}

AI Assistants

AI Tools

AI Form Assistant

AI Data Analysis

AI Usage Insights

AI Recommendations

About

Tags

Share

More from esimadmin

More Templates Like This

About

Tags

Share

About

Tags

Share

More from esimadmin

More Templates Like This